Horizontal Submenus?

Hi Nicole,

You can set the sub menu to ‘Mega Menu’. By default your links will be listed in equal width columns, with a maximum of 8 sub menu items along the top row.

To remove those columns, and let the sub menu items naturally position themselves, please go to Mega Menu > Menu Themes and paste the following into the Custom Styling area:

@include desktop {
  #{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-item {
    width: auto !important;
  }
  #{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-clear {
    clear: none !important;
  }
}

Regards,
Tom

Thanks, Tom! It’s getting there! I have the following additional questions:

1) How do I get the menu to span the full width of the header/content area? I notice you have the following notes:

A 100% wide panel will only ever be as wide as the menu itself. For a fixed panel width set this to a pixel value.

Advanced: Enter a jQuery selector to synchronize the width and position of the sub menu with existing page element (e.g. body, #container, .page).

2) How do I get it to clear the main header so that the top of the submenu is flush with the main header’s lower border (ditto)? and

3) How do I disable the mega menu on mobile and get it to revert back to the native hamburger/dropdown menu?

Many thanks,
Nicole

Tom, I tried to add the following code to get the submenu to span the full width of the content area, but it only reaches to the right edge, not the left:

  #{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu {
    width: 100vw !important;
  }

What do I need to do to resolve the issues above?

Thanks,
Nicole

Hi Nicole,

Please see https://www.maxmegamenu.com/documentation/divi/, it should answer most of your questions.

This is the limit of what I can provide to you under free support. If you need further help please employ a WordPress developer, you may want to take a look at jobs.www.remarpro.com or codeable.io.

Regards,
Tom

Hi, Tom. To be clear, I’m not using Divi; I’m using BShop, a Beaver Builder child theme. (Divi was the old site.) I can’t tell if the Divi instructions apply to Beaver Builder or not.

Unfortunately, I genuinely can’t afford to employ a developer, although I could manage the Pro version of the plugin, if that’s necessary. Would you be able to help finish this then?

Thank you,
Nicole

Hi Nicole,

1) Please try setting the Mega Menu > Outer Width to ‘body’
2) Please remove the 12px bottom Menu Padding, and instead set the top level Menu Item Height to 38px
3) There is some weirdness going on with your theme here, as the slider is covering over the menu. I am not sure if that is due to your theme or custom code you have added, but either way your theme authors are the best people to ask. As it is a premium theme you should have support included.

Adding this to the Custom Styling area of the menu theme should solve a lot of the problems with the mobile menu:

#{$wrap} {
    position: relative;
    z-index: 99999999;
}

You may also want to check ‘Disable Mobile Toggle’ on the menu theme.

Regards,
Tom

I had to fiddle around with the mega menu padding a bit, but I think it’s looking good now on desktop. I haven’t tested it on a tablet yet, but I set the mobile breakpoint at 768px, so hopefully, I won’t have to deal with the horizontal submenu on tablets at all.

I’m not worried about the vertical placement of the submenu on desktop; I think it looks fine spanning both the header and the slider below.

The one issue left is that the mega menu submenu isn’t aligning properly with the left edge of the screen/container on mobile. The whole menu appears shifted to the right, and the right edge of the link text is running right up against the right edge of the screen. What’s the best way to shift the whole panel over on mobile only?

Many thanks for all your help. I’ve really appreciated your graciousness. This has not been an easy thing for me to figure out.

Best regards,
Nicole