Archived topic
Navigation location
11 replies · Started by Michael on July 14, 2021
Hello,
I hope you can help me. How do I manage to place the navigation below a header with image? The navigation should not disappear when scrolling, but stay on top. (See screenshot)
Thanks a lot!
Hi Michael,
How is that header added?
Any chance you can link us to the site in question?
You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Let me know :)
Hi Leo,
i have created a header - Design - Elements - Page Header. Link of the page with the header is attached.
Thanks a lot!
The page header is a very outdated way to create things like these.
Would you consider using a block hook element with GenerateBlocks instead?
Then you can just choose the generate_before_header hook.
Let me know :)
What is used does not matter :-) the main thing is that it works...
Ok so the easiest way is to create a block page hero:
https://docs.generatepress.com/article/block-element-page-hero/
Then select before_header for the hook:
https://docs.generatepress.com/article/block-element-page-hero/#settings
Hello Leo,
great, thanks a lot for your help! I actually got it right :)
I still have one "small" question: I have inserted the code for the navigation: https://docs.generatepress.com/article/centering-logo-navigation/
Do you have a tip on how I can keep a certain distance to the left and right? The leftmost and rightmost links in the navigation should not be so far away from the page...
Hi there,
split menus that have uneven sides ( eg. 3 items to left and 2 to the right ) are tricky to constrain.
Are you considering adding any more menu items or removing the Home link ( as the logo is the common UI for that ) ?
Hello David,
soon we will have 3 links on each site, yes.
Thank you and best regards
Michael
Once there in place we can take a look and provide some CSS to evenly space them and constrain their width so they sit closer to the logo.
Let us know when its been added :)
Hello David,
that's great, thank you!Below you will find the link. The menu is currently stretched with the Customizer....
Thank you very much and best regards
Michael
First thing is to reduce the Customizer > Layout > Primary Navigation --> Menu Item Width.
Try: 20px.
Then we can use some CSS to minimize its width:
.main-navigation .main-nav>ul {
max-width: 1100px;
}