Archived topic
Sticky Top Element and no wrap navigation
3 replies · Started by Faye on September 27, 2022
I am looking to make the top element sticky? I create an element and used a hook to place a background and button above the header/navigation...but I am unable to get the sticky element to work for just the top element.
I would also like to keep the navigation from wrapping; but this code is not working:
/* Primary nav submenu no wrap */
.main-navigation ul ul {
width: auto;
min-width: 200px;
white-space: nowrap;
}
Hi Faye,
With regards to the Top Element becoming sticky, can you try this code and see if it works for you?:
.gb-container.gb-container-2297b8b0 {
position: sticky;
top: 0;
z-index: 999;
}With regards to the Nav wrapping, you can try this:
#primary-menu ul#menu-header-menu {
flex-wrap: nowrap;
}But, you'll need to hide the branding text in Site Identity, and set a smaller font and less spacing for it to fit.
The sticky element worked perfect, thank you.
The navigation no wrapping did not work - it actually made the wrapping occur quicker..
I'm not seeing the 2nd CSS that Fernando provided:
https://generatepress.com/forums/topic/sticky-top-element-and-no-wrap-navigation/#post-2355942
How did you add the CSS?
