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

zeenata

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

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

zeenata

How do I change grid to 1240px? 

thanks.

zeenata

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

Albert

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next