Main menu item becomes invisible when hovering on submenu

mlgrippi · June 2016

Hi Muffingroup,

Can you check www.yogabearpc.com ? Notice when you hover over "Blog" in my main menu at the top of the page, when you go to some of the items beneath it in the submenu, you can no longer see "Blog". I cannot figure this out for the life of me.

Also, is there a way I can make the submenu not so thick?

Albert · June 2016

Hi,

to fix this issue with the Blog item, you need to use the following css:

#menu-main-menu li a:hover, #menu-main-menu li.hover a {
    background: #3898c0;
}

But to decrease padding for sub-menu items, you need to use an extra css:

#Top_bar .menu li ul li a { padding: 0 !important; }

Thanks for choosing Be

mlgrippi · June 2016

Thanks Muffingroup ...

Now sorry - where would I put this CSS code?

Albert · June 2016

Each css we recommend to put globally under Theme options > Custom CSS & JS > Custom CSS section.

mlgrippi · June 2016

Fantastic! Thank you!

Albert · June 2016

You are welcome

mlgrippi · June 2016

One more question..

The main menu bar item still disappears if you are actually on one of the pages that is under that menu.

What is the code for that?

Thank you!

Albert · July 2016

Ok, got it. So to make this item background active as well, please use:

.current-menu-parent.menu-item-has-children { background: #3898c0 !important; }

mlgrippi · July 2016

Awesome thank you!

Albert · July 2016

You're welcome!

Main menu item becomes invisible when hovering on submenu

Comments