[Resolved] Improve mega menu

[Sam]

Hi!
I’m using GP pro 2.3.2 with plugin 1.8.3
In this particular site, I need to use a mega menu. I tried both max mega menu and quad menu. Neither of them fitted nicely in my theme. Don’t really know why, but I’d actually prefer to have a plain and simple mega menu that just lists items, no fuss. But intergates with my theme. Neither of the above mentioned options did that. The’re overkill and need lots of customization.
The other option is to use the code you provide.
i copied the code in https://docs.generatepress.com/article/building-simple-mega-menu/
It does the job…
Anyway it has some flaws:
Whenever I set the megamenu colors, it gets confusing. It doesn’t set the colors properly in customizer. I even get child items in colors I don’t have defined. It may be the default colors it assumes for the child items. Because in mega menus, it sets the colors for the grandchild items. Another thing it gets confusing is the hover: even when I set the mouse in a grandchild item, the color of the child item changes too.
Is there a way you can help me to get more personalization of megamenus?

Are you considering of including megameu in future relesases?
I know you’ve been asked this before. I think you don’t see it as a priority but please think better about it!
I use megamenus in most of my sites. It is also requested by many customers. It’s so useful!

[Leo]

Hi there,

Any chance you can link us to the site in question first?

You can edit the original topic and use the private URL field.

It’s unlikely that mega menu will be added in the future release – we try very hard to keep the theme and plugin light and fast so only add features that’s useful for the majority of the users.

We can definitely help to tweak the CSS if the requirement is simple 🙂

[Sam]

Thanks for the fast answer.
The URL is: https://www.sementesdamor.pt

The only issue is it is still in coming soon mode.

[Leo]

Can you disable it temporarily so we can see?

You can also provide admin access through Account Issues if you’d like:
https://generatepress.com/contact/

Be sure to mention the topic URL.

[Leo]

So what would you like to change? The hover color of child menu items?

[Sam]

Hi, again!
I’d want to, if its not too compliated, to set:

– Hover color of child menu text and background;
– Stop having the hover effect on the child item whenever I pass hover a grandchild item;
– Set the (maximum) width of the megamenu on sticky menu position independently of its defined width for header menu. So it doesn’t get to have different widths when on header menu and on sticky menu.

Thanks in advance.

[Tom]

Hi there,

1. The hover colors of the child menu can be set in the Customizer. Right now it’s set to white background + blue text.

2. Try this:

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

3. Give this a shot:

.navigation-stick .mega-menu > .sub-menu {
    max-width: 800px;
    margin-left: auto;
}

[Sam]

Hi Tom!

1. Yes Tom, I did that. The problem is that in customizer, the colors you define will work only for grandchild items. Not for child items.

2. Not quite there. It stopped the hover color but actualy didn’t solve the main issue.

If I put it in another way…
The issue is that for some odd reason the colors we define in customizer for child menu items actually only work for the grandchild items. And with that the child items got that hover effect even when they’re not being clicked. Try the menu and you’ll understand what I mean.

3. Worked well. Thanks.

[Tom]

1. To target the child item, try this:

nav .main-nav .mega-menu > ul > li > a {
    background: your-value;
    color: your-value;
}

2. I’m not seeing my CSS added – can you re-add it if you removed it?

[Sam]

H agan!

Yes I removed the CSS so you could see the effect of the hovering.
It’s there again.

On the last piece of coed you gave, I just needed to add !important to color, otherwse the chld item on a column of an actve page would stll appear n dark grey. I know we shouldn’t use it, but i couldn’t find a better opton.

On the issue of the hoverng effect, I think I will have to do things differently.
I removed the background color changing to #fff on hover, because the hover wouldn’t work for the child items. If I add !important to hover background color, then the child menus will show background color in #fff even when I’m hovering over the grandchild items.

If you think you can find a way to solve this minor bug, great. Otherwise I’ll stick to this solution.

If you want to see the effect, you can notice it with the child items color: whenever you pass the mouse hover a grandchild, the color of the child item in the same column also changes to #0F52BA.
Have a look.

You know I’m only a bit more demanding in this partcular site because its health related (psychology, osteopathy, traditional chinese medicine, and so on). Auditors are particular strict on YMYL (your money or your life) sites.
And because I have more than 20 pages to add to those 3 columns.

[Tom]

I’m not sure I fully understand. With the CSS I provided above, the child item should stay white: http://prntscr.com/p3vkri

You might need to use !important, which definitely isn’t the end of the world.

[Sam]

Tom, if you check the site you’ll definitely understand what I mean.

Here is the code:

nav .main-nav .mega-menu > ul > li > a {
    background: #67A9A9;
    color: #fff !important ;
}
nav .main-nav .mega-menu > ul > li:hover > a {   
    background: #ffffff !important;
    color: #0F52BA !important ;
}

Now you go and have alook 🙂

[Tom]

What if you do this instead?:

nav .main-nav .mega-menu > ul > li > a {
    background: #67A9A9;
    color: #fff !important ;
}

nav .main-nav .mega-menu > ul > li:hover > .sub-menu > li:hover > a {
    background: #ffffff !important;
    color: #0F52BA !important;
}

[Sam]

Sorry, Tom.
That last piece of code didn’t produce changes.

I tested it and .sub-menu isn’t interpreted.

Have any other idea?

[Tom]

Here’s what I’m seeing now: http://prntscr.com/p5b6nr

I’m not seeing the same issue I was seeing before – maybe I’m missing it?

Let me know 🙂

[Author]

Posts