[Resolved] Sticky Top Bar instead of sticky menu?

[Michael]

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 */
}

[David]

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

[Michael]

thats brilliant, thanks so much for the quick response

[Michael]

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

[David]

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.

[Michael]

genius, thank you. I am new to generatepress but so far am delighted with it and the fast support!

[David]

Happy to hear that!

[Michael]

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?

[David]

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.

[Michael]

hi, ok I’ve enabled that there, thanks

[David]

I am not seeing the sticky nav enabled ?

[Michael]

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

[David]

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.

[Michael]

ok that’s done now thanks

[David]

Do you have any page caches enabled ? As i cannot see the Sticky Navigation on the site

[Author]

Posts