Mega Menu - Full Width of Parent Element?

[Jupiter]

Hi! First of all I want to say I LOVE LOVE Smart Menu! 🙂 I have tried literally over a dozen different responsive menus and this is the only one that covers everything I wanted and needed without quirks, bugs and massive files! BRAVO! I love how easy it is to style as well.

Now, on to my question:
Is there a way to have the .mega-menu dropdown be the full width of the menu (or the parent div that the menu sits in)? It functions on small screens, but not desktop or tablet. I have tried a variety of things to accomplish this but to no avail. I would truly appreciate any assistance.

An example of what I mean: go to mashable.com and hover over one on the main items – you’ll see the sub nav extends the full width.

Thanks!

[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!

[Jupiter]

Thanks so much! I will give these a try!

[johnliu]

Came across this after looking for responsive menu scripts. Great work. But I tried this suggestion for mega-menu and the width of submenu became whole page while the parent menu has margins on left& right.

[admin]

Make sure you are using code sample II) above and your main menu has relative position set (which is the case with the default demo):

#main-menu {
	position:relative;
	z-index:9999;
	width:auto;
}

[jimbob]

Just enhance the second css with “height ….” and you will get a wonderful, wonderful mega menu in smartmenu. The height is unfortunately fixed in this solution. Got no solution for a variable height, depending on the number of menu items – maybe someone else :o) .

#main-menu > li {
position:static !important;

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

height: 100px;
-webkit-column-count: 6;/*6= number of columns you like to have in your mega menu*/
-moz-column-count:6;
column-count: 6;
}

[Author]

Posts