Megamenu - Offscreen

Support
#1

I am trying to build a new submenu/megamenu and I followed your document guidance to create something, but the CSS sends the submenu off canvas.

I also see you now have a megamenu element, which looks nice, but does that only work on an icon toggle, I can’t create that same megamenu from a standard inline navigation text links?

#2

Hello @AshleyF,

Thanks for writing in! Be advised that you cannot create a mega menu from a standard navigation inline element. What you should do is to use the Megamenu Dropdown elements. You may need a few MegaMenu Dropdowns if you have two or more menu items. Please check out this changelog for mode details about the Dropdown element: https://theme.co/content/pro4-3-x8-3-cornerstone5-3

Best Regards.

#3

Hi Rue,

Thank you, I have had a little play around and created a main navigation of 7 individual mega menus (with text instead of icons). And I have worked out how on the desktop to create the dropdown to spread across the width of my content area. These are my settings.

  • site width 88%
  • Site width max 1366
  • content width 81% (around 1106.46 for pages with sidebar)

So this is what it looks like if I click the first and last menu items, and looks similar what I am hoping to generate for desktops down to iPad landscape sizes.

central
central3769×1439 493 KB

But problem one, if I click the middle link items, my dropdown is offset off the screen rather than remaining at that centralized view.

Offscreen
Offscreen3794×1314 444 KB

The other issue I have, which for the life of me I can’t work out. With that navigation list of links in that second bar, when the screen shrinks they are lost off screen, rather than automatically creating a second row of links.

#4

Please note I have a new staging website, so I have updated the secure note.

#5

Hey @AshleyF,

I have logged in and I cannot edit your header. When I edit it, it will just redirect to an error 404 page. Please check your site so we can edit and check your megamenu. In the meantime, please check out this related thread which may help you position your megamenus.

Best Regards.

#6

Hi Rue,

Sorry the staging website is not working too well. I have created a test page on our live site and created this header for that test page. I will update the secure note.

I implemented the CSS from the link you provided and made the megamenu 100% which works fine. But is it possible to make the width match the content width for different breakpoints?

So for my large desktop I have made it 1366px min/max but I realise as we go down breakpoints it stays at 1366 so half the content is lost. Does that make sense.

#7

Hi Ashley,

Matching the Modal width to the site width is easy, you can set up your modal width like this (https://i.imgur.com/NUlBUEp.png). However, keeping it horizontally center and responsive is tricky. It is easy if the 1366px is the fixed width value, but it’s not because that is the max-width, not the actual width. You need the technique provided here to center an absolute div.

Yes, I saw you set 1366% as max-width and 81% as min-width. That min-width is the reason why the modal container is not shirking

Set your Container to wrap and the self flex to 1 1 auto.

Hope it helps,
Cheers!

#8

Thank you so much for your help, I am getting there!

For anybody struggling with this, I placed this CSS as the element CSS for each individual megamenu link, and seems to work fine.

$el.x-dropdown {
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    animation: et-fadeIn .3s ease !important;
    display: block;
    transition: all .2s ease-in-out;
}
#9

Hi Ashley,

Awesome solution you come up there. Thank you for sharing.

Cheers!

#10

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