[Support request] keep top bar visible with sticky navigation

[Paul]

i’d like to use the top bar as a search box area (and maybe contact info) but i’d like it to be visible with the sticky menu when scrolling, and also on mobile header.

[Fernando]

Hi Paul,

Can you add the Search Block through a Block Element hooked to before_header? Then, we’ll go from there.

[Paul]

ok did that. not sure why my html block isn’t on right side now, but can fix later.

[Fernando]

Can you change the priority to 1?

[Paul]

did that, thanks.

[Fernando]

Great! Now, add my-custom-top-bar to the class list of the Container Block of your custom top bar.

Then, add this in Appearance > Customize > Additional CSS:

.gb-container.my-custom-top-bar {
    position: sticky;
    top: 0;
    z-index: 9999;
}

nav#sticky-navigation.is_stuck {
    top: 39px !important;
}

Try adding a Background color to the Container Block as well so it’s not transparent on sticky.

[Paul]

getting closer, (thank you!) but on mobile, when the page is scrolled, the normal header goes under the element custom top bar.

edit: we did put some css in to help but not sure if it’s ideal and it’s still a bit clunky. we think maybe we need to remove the transition ??

[David]

Hi there,

have you tried removing the transition in the Customizer > Layout > Sticky Navigation ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts