[Resolved] Improve mega menu

Home Forums Support Improve mega menu

  • This topic has 15 replies, 3 voices, and was last updated 1 year ago by Sam.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1003409
    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!

    #1003459
    Leo
    Staff
    Customer Support

    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 🙂

    #1003562
    Sam

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

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

    #1003589
    Leo
    Staff
    Customer Support

    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.

    #1003735
    Leo
    Staff
    Customer Support

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

    #1003807
    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.

    #1004151
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #1004347
    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.

    #1004364
    Tom
    Lead Developer
    Lead Developer

    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?

    #1004543
    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.

    #1004970
    Tom
    Lead Developer
    Lead Developer

    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.

    #1005113
    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 🙂

    #1005254
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #1007442
    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?

    #1007936
    Tom
    Lead Developer
    Lead Developer

    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 🙂

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.