How can I style the Top Bar menu on scroll with sticky header?

Claireatkinson9 · March 2020

Hi All

I have a frustrating problem and can't find anything on here to help... I'm doing some mods on a client website (written by someone else) to make it look better on a tablet and, not being very familiar with the depths of Betheme I'm struggling to get the styling on the sticky header top bar menu to work. It's not built using the header builder plugin and i reckoned it would be an easyish CSS tweak, but am struggling. I've managed to figure out how to get the default header to look ok on a tablet (see first pic below) but can't figure out how to do the same on scroll with the sticky header (see second pic below). All I need is some help with the CSS to style the top bar menu when it's sticky (please!)

Thankyou!

This is the header before scolling (ignore the yellow and crushed menu items - that's me playing in CSS trying to work out what I need to do!). The header after scrolling is below

this is the header after scrolling:

Pablo · March 2020

Hello,

This is because that menu has too many items inserted inside, and when your menu items does not have place to fit, it push them down.

There are two ways to get rid of it:

1) Decrease the main menu font size

2) Use the "Submenu" and push some items inside it.

Thanks

Claireatkinson9 · March 2020

Thanks Pablo I get it and that’s what i managed to do on the header both before I scroll and when sticky BUT whilst I have managed to reduce the padding on the header before scroll for the menu items I don’t seem to be able to do the same when it’s sticky so the menu is too wide and doesn’t format properly when I scroll. So I really just need the correct css as just replacing :not(.isSticky) with .isSticky in the custom css seems to have no effect on the menu padding when I scroll. Hopefully that makes sense?
Thanks
Claire

Claireatkinson9 · March 2020

I meant I’d already managed to reduce the font size - that probably wasn’t clear!

Pablo · March 2020

So, do you need further help?

I'm not sure if you solved the problem or not.

Thanks

Claireatkinson9 · March 2020

Hi - yes, sorted thanks, it was a combination of menu width and font and one or two other things ...

How can I style the Top Bar menu on scroll with sticky header?

Comments