[Resolved] Help with Mega Menu

Home Forums Support Help with Mega Menu

  • This topic has 5 replies, 3 voices, and was last updated 3 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1341855
    Alan

    I need help cleaning up a few items pertaining to the GP mega menu as follows:

    On desktop, I have all active, hover, and visited nav links set to white text. However, after clicking on one of the sub-menu headings, in this case “South America”, the color turns to the site default of #393939. How do I keep it white after visited?

    On desktop, I have highlighted one of the Nav Menu items, “Contact Us”, so that it has a ghost button type 2px border on all sides. However, when the mega menu drops down, the bottom border disappears. How do I resolve this?

    On desktop, for my second mega menu, “Interests”, in order to break up 20 pages into 4 columns of 5 pages each, I created dummy headings “Interests 1-5”, “Interests 6-10”, etc. How do I get them to not appear and move the column content up on the menu so that there is no extra space?

    For mobile, I am using the off canvas feature, and for this same mega menu, “Interests”, what shows is the 4 dummy headings. What I ideally want is to show a list of all 20 pages. You can see how it is handled in my live site, which I am moving over to GP here http://www.savacations.com and my GP site is attached.

    #1341927
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. You currently have this:

    nav .main-nav .mega-menu > ul > li:hover > a,
    nav .main-nav .mega-menu > ul > li:focus > a,
    nav .main-nav .mega-menu > ul > li[class*="current-"] > a,
    nav .main-nav .mega-menu ul ul {
        background-color: transparent !important;
        color: inherit;
    }

    Try changing it to this:

    nav .main-nav .mega-menu > ul > li:hover > a,
    nav .main-nav .mega-menu > ul > li:focus > a,
    nav .main-nav .mega-menu > ul > li[class*="current-"] > a,
    nav .main-nav .mega-menu ul ul {
        background-color: transparent !important;
        color: #fff;
    }

    2. Instead of this:

    .menu-highlight, .menu-highlight:visited {
        background: transparent;
        border: 2px solid #ffffff;
        font-size: 1em, line-height: 32px;
    }

    Try this:

    .menu-highlight, .menu-highlight:visited {
        background: transparent;
        box-shadow: inset 0 0 0 2px #fff;
    }

    3. You could give those menu item custom classes, then do this:

    nav .main-nav .mega-menu > ul > li.your-custom-class {
        display: none;
    }

    4. I would personally just create a separate menu just for the off-canvas panel. That way you can just list the menu items out manually.

    Hope this helps!

    #1341969
    Alan

    Tom, for #3, “none of the items in the interests mega menu are displaying. My custom class is “int-headers”. Any other ideas?

    #1342283
    David
    Staff
    Customer Support

    Hi there,

    #3 try this CSS:

    nav .main-nav .mega-menu > ul > li.int-headers > a {
        display: none;
    }
    #1342431
    Alan

    That worked…Thanks!!

    #1342447
    David
    Staff
    Customer Support

    Glad we could be of help

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