Mega Menu - Full Width of Parent Element?
Home › Forums › Older releases › 0.9.x › Mega Menu - Full Width of Parent Element?
- This topic has 5 replies, 4 voices, and was last updated 5 years, 7 months ago by
jimbob.
-
AuthorPosts
-
December 19, 2013 at 08:38 #1288
Jupiter
ParticipantHi! 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!
December 21, 2013 at 10:11 #1497admin
KeymasterHi! 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!
December 22, 2013 at 12:26 #1498Jupiter
ParticipantThanks so much! I will give these a try!
September 4, 2014 at 20:22 #1723johnliu
ParticipantCame 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.
September 5, 2014 at 08:52 #1724admin
KeymasterMake 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; }
June 14, 2015 at 23:09 #2595jimbob
ParticipantJust 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;
} -
AuthorPosts
- You must be logged in to reply to this topic.