Menu full width but menu items in a max width container

Looking at the code, I see my issue is the ul for the sub-menu is outputted contained inside the ul of the main-menu so if I set the width on the main-menu the sub-menu has to adapt. Is there a way to output the sub-menu separate? So pul it out of the main menu ul and output it once the main-menu ul has been closed so it can have its own width?

Ideally an output something like:

<div id="menu-container">
<div class="main-menu-wrap"><ul class="main-menu">
<li></li>
<li></li>
</ul>
</div>
<div class="sub-menu-wrap"><ul class="sub-menu">
<li></li>
<li></li>
</ul>
</div>
</div>

That way I can set both uls to have a max-width of 1250px and margin 0 auto, whilst keeping both containers 100% width of the page.

Any help much appreciated!! ??

Hi Suntura,

I took a look at this last night. I see what you need to do too: wrap the mega menu UL in a div, so that you can apply a max width and ‘margin: 0 auto’ to the UL.

There’s a few issues:
1. the CSS and JS expects the menu to be formatted as nested ULs, so throwing a <div> in there somewhere will break the CSS and possibly the menu functionality.
2. I’m not sure if you’ve ever encountered the wordpress menu walker, but to put it lightly, it’s pretty difficult to change anything without breaking stuff. I don’t think there is a way to wrap certain sub menus in an extra div, I can only modify it so all sub menus (that includes flyout menu’s) are wrapped, which wouldn’t be ideal for most people.

I think, right now, the only option would be to use jQuery.wrap() to wrap the list items within a mega menu panel. To do it without breaking CSS I think you’ll need to wrap the
<li>‘s, not the <ul>, but then I’m not sure if <ul><div><li> is valid HTML…

Regards,
Tom

Hi Tom,

Thanks for the reply, I’ve been working on this for the last hour or so. I’ve now deicded to just make my whole site responsive with percentages.

Ive set the main content containers to 70% with padding of 15% each side and done the same for the mega-menu sub-menu and headers. This way as the window shrinks so does the menu and content and it still has the full width effect but with the contained mega menus. Then as the screen size passes 1250px I will use a few @media css rule steps to decrease the amount of padding to 10% or 5% and the content relatively to 80% and 90% as the screen size shrinks until it hits the 600px and goes into mobile version.

It looks OK at the moment and seems to work well. Hopefully will be able to get it all working nicely eventually.

Thanks again!

Hi Tom,

Has there been an effective resolution to this? The plugin is fantastic. Aesthetically it would awesome to have a full-width submenu, but with its contents contained to a max-width (ie the same width as the rest of the site’s content). I’ve tried several methods you listed above, but as you point out it has simply broken something else.

Thanks! ??