Archived topic
Navigation search on sticky header
7 replies · Started by Jennifer on January 29, 2022
When you click the search icon in the sticky header it doesn't align properly like it does when you are at the top of the site. Happening on all screen sizes.
Hi there,
Are you referring to the underline effect? If so that's not something GP adds by default.
If that's created with custom CSS, then you will need to have a second set of CSS that targets the sticky navigation.
Another option is to use the navigation as a header option so the CSS should be the same in both static and sticky case:
https://docs.generatepress.com/article/navigation-as-a-header/
I see... I guess is there a way for the search to behave the same when using navigation as a header as it does normally?
Hmm you might just need to write a different set of CSS for the navigation underline that targets the sticky navigation.
I see 2000+ lines of custom CSS in your site so I'd assume you have a developer working on the site for you?
I am working on the site. It's not the underline that is issue, but the general placement of the search area itself (at the top of the page and across the logo as opposed to directly over just the menu items and below the header pushing down the main content on mobile).
Ahh I think I see what you are saying.
What if you increase the sticky navigation menu item height?
https://docs.generatepress.com/article/sticky-navigation/#menu-item-height
I worked it out with some CSS. Not perfect, but it works.
Looks good to me!
