Menu text overlaps page text when scrolling. How to change menu bkgd or get rid of it, on scroll?

zeenata · March 2015

1. Go to athomeqc.com

2. Scroll down the page.

You'll notice the menu pop up at the top as you scroll down. The grey menu text overlaps over the page's text & it looks quite unprofessional.

- How do I give the menu a white background instead of a transparent background, when scrolling?

- How do I get rid of the menu from showing during scroll, altogether?

Thanks.

Albert · March 2015

Hi,

you use too many menu items for 960px grid. So or you will move some items under submenus or you will use below css:

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

Also you can change grid to 1240px and everything will be fine as well.

zeenata · March 2015

How do I change grid to 1240px?

thanks.

zeenata · March 2015

Also, there is this thin grey line that is a separator between the menu items, how do I get rid of that ?

Albert · March 2015

1240px grid can be activated under Theme options > Layout > Header section when you will deactivate 960px grid. But to remove separator between menu items, please use below css:

#Top_bar .menu > li > a span:not(.description) { border: 0; }

Menu text overlaps page text when scrolling. How to change menu bkgd or get rid of it, on scroll?

Comments