Header – Fixed/Absolute Position

[Lewis Hackfath]

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

[David Morgan]

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!

[Lewis Hackfath]

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

Attachments:

You must be logged in to view attached files.

[David Morgan]

Hi Lewis,

No problem. Can you provide a link to your website so I can inspect the code?

Thanks!

[Lewis Hackfath]

This reply has been marked as private.

[Lewis Hackfath]

Hi Dave,

Any update on this one?

thanks

[David Morgan]

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!

[Lewis Hackfath]

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

[Lewis Hackfath]

using the CSS you provided achieves the desired result however when logged in the admin menu bar overlaps the header.
Image attached

Attachments:

You must be logged in to view attached files.

[David Morgan]

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!

[Author]

Posts