Re: Mega Menu - Full Width of Parent Element?

[admin]

Hi! Thanks for the thumbs up, happy to hear you like the script! 🙂

You can achieve it via CSS.

I) For example, you could use the following if you have just mega sub menus (one level):

#main-menu, #main-menu > li  {
	position:static !important;
}
#main-menu > li > ul {
	margin-left:0 !important;
	right:0 !important;
	width:auto !important;
	max-width:none !important;
}

This would make all your sub menus take the full page width (or the full width of any positioned parent element of your menu tree if there is one).

II) If you’d like the sub menus to take the full width of your main menu, you could use this:

#main-menu > li  {
	position:static !important;
}
#main-menu > li > ul {
	margin-left:0 !important;
	right:0 !important;
	width:auto !important;
	max-width:none !important;
}

III) And if you want just your mega sub menus to take full page width and still have other regular sub menus, you will need to add a class to the parent LIs of your mega menu – e.g.:

<li class="mega-menu"><a href="#">Menu item</a>
    <ul class="mega-menu">...

and then use the following CSS:

#main-menu, #main-menu > li.mega-menu  {
	position:static !important;
}
#main-menu > li > ul.mega-menu {
	margin-left:0 !important;
	right:0 !important;
	width:auto !important;
	max-width:none !important;
}

I hope this helps. Let me know if you have any troubles.

Cheers!