Archived topic
Sticky Header
8 replies · Started by Patrick on May 10, 2020
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!
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 :)
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.
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.
Ok, I added the url to my original post.
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.
Tried it. Didn't care for it because it overrides other settings and removes some options.
Try this:
@media (min-width: 769px) {
.site-header {
position: sticky !important;
top: 0;
z-index: 99;
}
}Awesome...that worked like a charm!
Anyway to apply that to just the desktop version?
