Archived topic
Help with Mega Menu
5 replies · Started by Alan on June 25, 2020
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.
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!
Tom, for #3, "none of the items in the interests mega menu are displaying. My custom class is "int-headers". Any other ideas?
Hi there,
#3 try this CSS:
nav .main-nav .mega-menu > ul > li.int-headers > a {
display: none;
}That worked...Thanks!!
Glad we could be of help
