Header – Fixed/Absolute Position

Home › Forums › Technical Theme Support › STAX Theme › Header – Fixed/Absolute Position

Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 15, 2024 at 12:19 am #462874
    Lewis Hackfath
    Participant

    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

    April 18, 2024 at 5:21 am #462943
    David Morgan
    Keymaster

    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!

    April 18, 2024 at 8:33 am #462947
    Lewis Hackfath
    Participant

    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.
    April 23, 2024 at 11:01 am #463102
    David Morgan
    Keymaster

    Hi Lewis,

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

    Thanks!

    April 23, 2024 at 11:05 am #463104
    Lewis Hackfath
    Participant
    This reply has been marked as private.
    May 9, 2024 at 7:29 pm #463785
    Lewis Hackfath
    Participant

    Hi Dave,

    Any update on this one?

    thanks

    May 13, 2024 at 8:13 am #463832
    David Morgan
    Keymaster

    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!

    May 13, 2024 at 11:53 am #463837
    Lewis Hackfath
    Participant

    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

    May 13, 2024 at 12:37 pm #463838
    Lewis Hackfath
    Participant

    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.
    May 15, 2024 at 9:20 am #463875
    David Morgan
    Keymaster

    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
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.