Archived topic

Drop down mega menu styling lost

5 replies · Started by TWMA Support on March 2, 2018

Viewing posts 1–6 of 6

March 2, 2018 at 1:50 am #509464

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

March 2, 2018 at 8:06 am #509784

Hi there,

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

Can you give it a shot?

March 2, 2018 at 8:42 am #509813

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

March 2, 2018 at 9:53 pm #510238

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

March 3, 2018 at 5:39 am #510455

Thanks for the help on this. All sorted.

March 3, 2018 at 9:53 am #510659

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.