Megamenu with two different widths

Hi Roman,

Yes, it’s possible.

Go to Mega Menu > Menu Themes, in the Mega Menus section you will see a Panel Width option with inner and outer settings.

Set the Outer width to a jQuery/CSS Selector that matches the outer width of your site, e.g:

.outer-container

And the same for the inner width, e.g.

.inner

Regards,
Tom

Hi Tom
Thank you for your support.
That sounds great and exactly what I need.

Can you please explain it a bit more?

Ok, i found the Section “Panel Width”
In there I write “.outhercontainer” in the field “outher width”, right?

But what I have to do with jquery-selector, and where?
Do I have to write some jquery to my Site`s js?
Someting like:
$( “.innercontainer” ).css( “max-width”, “1050px” );
$( “.outhercontainer” ).css( “max-width”, “1380px” );

Thank you
Roman

Hi Roman,

You don’t need to write any JavaScript.

Just find the class that is on your outer and inner div and enter it into the Panel Width options. If the div that wraps your outer content is like this:

<div class='outercontainer'>

.. then enter .outercontainer into the Panel Width (Outer) setting.

Regards,
Tom

Hi Tom
Tahnk you! No I`m a big step further.

The Megamenu itself is now in outher-width. The contents of those are in inner-width. So far so go.

Now I need to set my Main-Navigation to inner-width too, like you can see on my Design.

Is that possible? Maybe with some custom CSS?

Thank you very much!
Roman

Hi Tom
It`s me again.
Is there a way to set the Top-Level (Mainnavigation) to the inner-width?

Like you can see on my Design.

Main-Navigation -> inner-width
Mega-Menu -> outher-width
Mega-Menu Contents -> inner-width

This is a preview of what I have so far.
Demosite

Thank you
Roman

Hi Roman,

It is not possible using the MMM settings, you would need to edit your themes header.php file and place the menu inside a div which centralises the menu (in the same way you have a div that wraps you page content and centers it).

Regards,
Tom