Archived topic
keep top bar visible with sticky navigation
7 replies · Started by Paul on October 4, 2022
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.
Hi Paul,
Can you add the Search Block through a Block Element hooked to before_header? Then, we'll go from there.
ok did that. not sure why my html block isn't on right side now, but can fix later.
Can you change the priority to 1?
did that, thanks.
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.
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 ??
Hi there,
have you tried removing the transition in the Customizer > Layout > Sticky Navigation ?
