[Resolved] Drop down mega menu styling lost

[TWMA Support]

Hi

I had the drop down menu setup as a mega menu. Recently I was on the site and noticed that the mega menu is acting very strangely in that the first level appears when you mouse over the top level but the third tier only appears when you mouse over the second tier.

Also I noticed that the drop down under the “About” is off to the left when it should be right aligned.

I looked in the additional css in the “Customise” section and it seems to be blank, but I am pretty sure that I included the drop down css in there. I did an update recently (cant remember when), but thinking that may have had something to do with it.

Please could you take a look and provide a fix.

Thanks

[Leo]

Hi there,

We’ve updated the CSS recently: https://docs.generatepress.com/article/building-simple-mega-menu/

Can you give it a shot?

[TWMA Support]

Hi

Ok great that seemed to fix the menu except the hover state of the 2nd tier is now the same as the background colour when it should be orange.

Also the about menu still shoots off to the left.

Thoughts.

Thanks

[Tom]

Try adding this CSS:

nav .main-nav .mega-menu > ul > li:hover > a {
    color: #fff;
}

The About sub-menu is going to the left because you have this CSS in your child theme:

.main-navigation ul ul {
    box-shadow: 0 2px 2px rgba(0,0,0,.1);
    float: right;
    right: 0;
    z-index: 99999;
    text-align: left;
}

[TWMA Support]

Thanks for the help on this. All sorted.

[Tom]

You’re welcome 🙂

[Author]

Posts