[Resolved] GeneratePress Mega Menu

[troyw]

Hi team,

I have followed your directions as per the following link and created a Mega Menu.https://docs.generatepress.com/article/building-simple-mega-menu/

This has worked very well, however I am having difficulty highlighting each Sub Menu Category.
As you will see, I have been working on the menu for ‘Birds’. I have created Sub Menu Categories, under which are the various Product Categories. I want to make the ‘Sub Menus’ stand out, either a different color or a different sized font.

In order to create a different background color to the Sub Menu, I have added the following CSS;
.sub-heading {
background-color: #ff9b00;
font-size: 50px;
color: #4f4f4f !important;
font-weight:bolder !important;
border-radius:10px;
}

I then added ‘sub-heading’ to css classes in the menu.

As you can see though, this has colored the entire column, but I just want to change the Sub Menu / sub heading.
How do I stop the background color being copied to the other menus and how do I adjust the font color and size, specifically of the Sub Menu?

Thanks in advance

[David]

Hi there,

if you want to style just the top level item of each sub menu then try this CSS:

.main-navigation .main-nav > ul > li > ul > li > a {
    background-color: red;
    font-size: 16px;
}

[troyw]

Hey David,
That worked like a charm, thanks.
My issue now is that when I hover over a main navigation Menu, the text turns Grey and I can’t see it anymore. I have tried all the color settings for the navigation and can’t seem to find how to change the hover text to white for the Main Navigation Menu we just added?

Thanks

[David]

You can add specific hover colors with this CSS:

.main-navigation .main-nav > ul > li > ul > li:hover > a {
    background-color: red !important;
    color: #fff;
}

[troyw]

Just what I was looking for David.
Cheers

[David]

You’re welcome

[Author]

Posts