[Support request] Sticky Header

Home Forums Support Sticky Header

This topic contains 8 replies, has 3 voices, and was last updated by  Patrick 2 weeks, 3 days ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1278315

    Patrick

    Hi,

    I’d like to have my normal header/navigation bar be sticky on desktop. Is there either…

    a.) A way to simply make this happen on desktop only without using the sticky header “module” as I don’t want the various shrinking or transition effects that occur with the sticky header module.

    OR

    b.) Any chance we could get more settings in the sticky header module so we can duplicate the appearance of the normal header/navigation bar. Currently, we can only specify menu height and it seems to ignore the values that are set for header padding and logo width.

    Thanks!

    #1278497

    Leo Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    Sometimes things can be tweaked with CSS depending on your header/navigation layout.

    You can edit the original topic and use the private URL field.

    Let me know 🙂

    #1278838

    Patrick

    I don’t have any form of sticky header implemented for you to take a look at since I couldn’t get it to work the way I wanted.

    #1279036

    David Customer Support

    Hi there,

    Leo just needs to see your existing site – as we need to see what layout you have so we can advise on how to make those elements sticky. Let us know.

    #1279080

    Patrick

    Ok, I added the url to my original post.

    #1279340

    Leo Customer Support

    Have you tried using the navigation as a header option to create this layout?
    https://docs.generatepress.com/article/navigation-as-a-header/

    Then you can activate the sticky navigation.

    #1279354

    Patrick

    Tried it. Didn’t care for it because it overrides other settings and removes some options.

    #1279359

    Leo Customer Support

    Try this:

    @media (min-width: 769px) {
        .site-header {
            position: sticky !important;
            top: 0;
            z-index: 99;
        }
    }
    #1279363

    Patrick

    Awesome…that worked like a charm!

    Anyway to apply that to just the desktop version?

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.