How to change the background colour of sticky menu when the page is being scrolled?

eugenietan · June 2016

Kindly assist this as I cannot find the solution on forum:

When I switch off "hide" in "top bar right" in the header and subheader(extra) selection to show my cart and search icon, I have a problem with the sticky menu when I scroll the page.

When I scroll the page, the header menu sticks and blend with the background making it messy and difficult to read the menu items. And the colour of the menu turns white, can't read well.

How can I make the sticky menu bar one colour on a bar while page is scrolling so that it looks neater with the white font text?

I've tried to switch the sticky header on with black but that's not the solution. And I've tried a number of selections to no avail.

Appreciate your help on this, thank you very much!

website: www.joyycup.com

Albert · June 2016

Hi,

This happens because you have too many menu items in header and it's not
possible to put them all together in one line with logo and other
stuff. So or you will move some of your main menu items as sub-menus or
you need to use the following css to decrease the padding between menu
items:

#Top_bar.is-sticky .menu > li > a span:not(.description) { padding: 0 10px !important; }

eugenietan · June 2016

Hi. I tried to add the css above but my sub menu arrow became merged with the main menu item. What should I do now?

Thanks!

Albert · June 2016

What you can do is move those arrows to the right side or just remove them. So just pick up one of below lines to do this:

.menuo-arrows #Top_bar .menu > li.submenu > a > span:not(.description)::after { right: -5px !important; } /* this line moves icon to the right side */
.menuo-arrows #Top_bar .menu > li.submenu > a > span:not(.description)::after { display: none !important; } /* this line removes icon */

eugenietan · June 2016

Thank you!

What would be the code for allowing some spaces between the items on the main menu when the page is scrolling? When page is static, the spaces are ok, I only have to change when the page is scrolling, they are too cramp together. Thank you so much!

Albert · June 2016

You need to set main menu under Appearance > Menus > Manage locations section.

How to change the background colour of sticky menu when the page is being scrolled?

Comments