- This topic has 9 replies, 2 voices, and was last updated 5 months ago by .
Viewing 10 posts - 1 through 10 (of 10 total)
Viewing 10 posts - 1 through 10 (of 10 total)
- You must be logged in to reply to this topic.
Home › Forums › Technical Theme Support › STAX Theme › Header – Fixed/Absolute Position
Hello,
I am using the stax theme and have created a custom header template part as the client wants to display a number of different things in the header of their site (buttons, images etc). However to do this I was unable to use the “Header block”. Is there a way to set the custom header template part to use absolute positioning using an inbuilt CSS Class?
thanks,
Lewis
Hi Lewis,
Thanks for reaching out! Yes, this is possible. The STAX theme has a .position-absolute class within the theme stylesheet. So, applying the “position-absolute” class to the new header within the Advanced block options should anchor the header to the top of the page.
Let us know if this works.
Thanks!
Hi David,
Thanks for getting back to me.
I’ve added that to the “additional classes” field on the “header” element and saved the changes.
However when I scroll down on any page the header is not following.
See attached Screenshot
Hi Lewis,
No problem. Can you provide a link to your website so I can inspect the code?
Thanks!
Hi Dave,
Any update on this one?
thanks
Hi Lewis,
I apologize for the delay. Upon inspecting the code on your site I see the class is applied. However, it’s applied to the wrong element. It should be applied to the group block, just inside the site header.
As another solution, you could just try applying this CSS:
.site-header > .wp-block-group {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
Let me know if this works.
Thanks!
Hi Dave,
I’ve moved it to the group and it has had some unintended results.
I’ve left it in place for you to see.
thanks
using the CSS you provided achieves the desired result however when logged in the admin menu bar overlaps the header.
Image attached
Hi Lewis,
Try adding this CSS to account for the admin bar:
.admin-bar .site-header > .wp-block-group {
top: 32px;
}
Let me know if that works.
Thanks!