[Support request] Sticky Top Element and no wrap navigation

[Faye]

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;
}

[Fernando]

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.

[Faye]

The sticky element worked perfect, thank you.

The navigation no wrapping did not work – it actually made the wrapping occur quicker..

[Ying]

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?

[Author]

Posts