- This topic has 5 replies, 3 voices, and was last updated 3 years, 9 months ago by David.
-
AuthorPosts
-
June 25, 2020 at 11:57 am #1341855Alan
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.
June 25, 2020 at 1:43 pm #1341927TomLead DeveloperLead DeveloperHi 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!
June 25, 2020 at 2:19 pm #1341969AlanTom, for #3, “none of the items in the interests mega menu are displaying. My custom class is “int-headers”. Any other ideas?
June 26, 2020 at 12:43 am #1342283DavidStaffCustomer SupportHi there,
#3 try this CSS:
nav .main-nav .mega-menu > ul > li.int-headers > a { display: none; }
June 26, 2020 at 4:06 am #1342431AlanThat worked…Thanks!!
June 26, 2020 at 4:43 am #1342447DavidStaffCustomer SupportGlad we could be of help
-
AuthorPosts
- You must be logged in to reply to this topic.