Archived topic
Sticky Top Bar instead of sticky menu?
18 replies · Started by Michael on February 21, 2022
hi,
I searched the forum that would allow me to have a sticky top bar instead of a sticky menu and none of the solutions seem to be working for me. https://aub.mayburyitsolutions.com/ is the demo site I am workgin on. Is there something I am missing? I have disabled the sticky menu from the customiser and have added the below and it wont work for me?
.top-bar {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 99;
}
#site-navigation {
position: -webkit-sticky;
position: sticky;
top: 21px; /* This is the height of the top bar */
}
Hi there,
the Top Bar is not the themes top bar, its a Block Element :)
Edit the Block Element that you have created the top bar and:
1. in the sidebar below where you set the Hook, is a Priority field, enter 0
2. select the parent Container Block and in Advanced > Additional CSS Class(es) add: top-bar
thats brilliant, thanks so much for the quick response
sorry just a small thing but now on the site: https://aub.mayburyitsolutions.com/ there is a white gap between the top bar and the image/nav section. the setting of the 'priority to 0 seems to be causing it. Is it possible to remove the space and yet maintain the top bar stickiness?
thanks
Edit your Top Bar Block Element and below the parent Container Block you will see an Empty Text block, select that and Backspace Delete it - that will get rid of that space.
genius, thank you. I am new to generatepress but so far am delighted with it and the fast support!
Happy to hear that!
Hi sorry but the client has changed their mind. On https://kbh.mayburyitsolutions.com/ they want the top bar and the navigation menu to be both sticky?
I can't see how that would work with that design, but if you want to enable the Customizer > Layout > Sticky Navigation we can take a look.
hi, ok I've enabled that there, thanks
I am not seeing the sticky nav enabled ?
Hi, it is enabled but last week I was looking to have only the topbar stuck so you gave me the code below which I have removed just now. So I'd like to have the top bar sticky and the standard sticky bar as well underneath. is this possible?
.top-bar {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 99;
}
#site-navigation{
position: -webkit-sticky;
position: sticky;
}
Can you enable the Customizer > Layout > Sticky Navigation option.
And remove this CSS:
#site-navigation{
position: -webkit-sticky;
position: sticky;
}Once done - let me know so i can take a look at whether we can make the Theme sticky nav work with the top bar.
ok that's done now thanks
Do you have any page caches enabled ? As i cannot see the Sticky Navigation on the site
