New megamenu added but it doesn't inherit styling or behavior

Support
#1

Hi,

Our X site has what seems to be a 2-column megamenu (see nexlan.com and hover over AccountMate > AccountMate Modules to see the 2-column flyout menu). Now I’m working on a staging site to replace that section with two new megamenus.

But the styling and behavior is wrong when I try this and I can’t find where it’s controlled on our live site so I can replicate it. In Appearance Menu for the live site, there is no CSS Class set for these - the CSS Classes field is empty. I looked in the X Global CSS and none of the code there seems to be related to this but I’m not a coding expert.

On the staging site, the styling looks correct for the new menus, until I add x-megamenu col-2 to the CSS Classes field and then it changes to 2 columns but the styling is completely different. Also the menu doesn’t fly out; instead it replaces its parent menu. How do I replicate what we have on our live site?

3 images:
Here’s a flyout menu on our current site. That’s what I want the new submenu to look like.

Here’s the new menu on my staging site all in one too-long column, before I add the CSS Class

Here’s the new menu on my staging site after I add x-megamenu col-2 to the CSS Class.

Thanks

#2

Hi Markh,

Thank you for writing in, yes I can confirm this bug with a level 3 megamenu. I’ve submitted this to our issue tracker so the developers will be made aware of it.

For now, please add this to Theme Options > CSS

.x-navbar .x-megamenu.menu-item-has-children ul.sub-menu {
    width: 550px;
}

Hope it helps,
Cheers!

#4

Hi,

This made the mega menu width wider - it does indeed look like 550px - see new image below. But it’s still not matching the styling. And it’s still not flying out - it’s overwriting the entire parent drop-down menu as soon as the mouse touches the mega menu parent item.

Thoughts?

#5

Hi @markh,

I checked the site and this is what I’m getting, perhaps it’s just due to cache? Please clear them and test it again.

Or are you working on a staging site? If yes, then please provide the site’s URL and we’ll check. I also checked your other posts and the URL provided are different than this one.

Thanks!

#6

Yes I’m working on a staging site. It’s password protected to prevent indexing so I’m adding the URL and credentials for you here privately.

(Re. the URLs being different from my other posts. Yes, when I log in to this site’s (NexLAN) Apex account it shows NexLAN but when I go to My Tickets and click the Enter Forum button it switches me to my other client’s Apex account each time. This is new; I used to be able to post tickets to each account separately. -Ann)

#7

Hi Ann,

To fix this, please add this code as well.

.masthead-stacked .x-navbar .desktop .sub-menu .x-megamenu .sub-menu {
    top: -1.025em;
    left: 100%;
}

.masthead-stacked .x-navbar .desktop .sub-menu .x-megamenu .sub-menu a {
   color:#fff;
   font-size: 14px;
    border:0;
    text-transform: none;
    padding:0;
}

.masthead-stacked .x-navbar .desktop .sub-menu .x-megamenu .sub-menu a:hover {
   color:#00385f;
}

.masthead-stacked .x-navbar .desktop .sub-menu .x-megamenu .sub-menu li {
    padding:0;
}

Hope that helps

#8

Oooo, that helps a lot, thank you! Almost there.

I increased the width from 550px to 700px so that the two longest menu item names don’t wrap in the flyout.
And I changed top: -1.025em to 3em, so that the flyout box is pushed down and no longer overlaps the main nav bar.

The last thing I can’t figure out: On both mega menus, the sixth menu position and every fourth menu position after that are blank unclickable lines in the menu. These blank spots all land in column two. So, column 1 is single spaced, and column 2 is double spaced except for the first two menu items. Thus the whole thing looks confusing. No menu items are missing; the blank spots are inserted as extras. Screen capture below.

Thoughts?

#9

Please add this code as well:

.desktop .x-nav .x-megamenu.col-2>.sub-menu>li:nth-child(3n) {
    clear: none;
}

Please just note that X Megamenus was not intended to be used for submenus. If you use the given codes here and later assigned the x-megamenu class to a top level menu and it breaks the layout, please remove the codes.

All codes given here only serve as a guide. This is beyond the scope of our support so issues that might arise from the use of it and further enhancements should be the user’s responsibility.

For more menu setups, I’d recommend that you use UberMenu.

Hope that helps and thank you for understanding.

#10

Hi - That last bit of code you provided did the trick instantly and I’ve pushed all the menu changes from the staging site to the live site. Thanks for your help!

Re. Megamenus. Perhaps consider updating the Megamenu tutorial to add guidance to set expectations for submenus with Megamenus. And to clarify that Ubermenu is a good option for X too not just Pro. Before opening this ticket I read everything on your site I could find about Megamenus options and styling (the tutorial page, support tickets, change logs). I found no mention of them not being intended to be used as submenus (it does give a heads up about limitations for stacked menus). Our existing site had that megamenu submenu since 2015 with no issues so I figured it was just a matter of copying it for the two similar new ones that would replace the old one. It wasn’t my intention to go out of scope with your support; we really appreciate your expert assistance.

#11

You’re welcome and no worries.

And, thank you for your feedback. I’ll forward that to the person managing our Knowledge Base.

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.