Why would you use a mega menu?

Mega menus allow users to see more links all at once without the hassle of scrolling, hovering, and remembering the contents of your menu. A good way to think about Mega Menus is that they are drop down menus within drop down menus. So instead of your normal dropdown menu which shows a submenu when hovering over your main parent links in your navigation bar, a megamenu allows you to have additional parent links and submenus within the dropdown menu.

This tutorial by Elegant Themes is a great place to start. Divi Mega Menus

Some sites we have used Mega Menus on:

www.milestonetours.co.nz

www.urbanindustrial.co.nz

www.woodenbach.co.nz

www.ciaobella.co.nz

 

Some sites we have used Uber Menus on:

www.stmartins.school.nz

 

Add extra columns into your Divi mega menu with some custom CSS.

As default the Divi mega menu when activated shows only 4 columns, but to make better use of space, you can add more columns. So, by adding a few lines of custom CSS we can change the 4 column mega menu into a 5, 6 or 7 etc column mega menu.

Just add the required CSS to your Divi theme options CSS window.
To keep a handle on the code you are adding it’s always a good idea to comment out a heading.

Something like /** DIVI 7 COL MEGA MENU **/

 

5 column Divi Mega Menu

1
2
3
4
5
6
7
8
9
10
#top-menu li.mega-menu > ul > li:nth-of-type(5n) {
clear: none;
}
#top-menu li.mega-menu > ul > li:nth-of-type(6n) {
clear: none;
}
#top-menu li.mega-menu > ul > li {
width: 20%;
margin: 0;
}

6 column Divi Mega Menu

1
2
3
4
5
6
7
8
9
10
#top-menu li.mega-menu > ul > li:nth-of-type(5n) {
clear: none;
}
#top-menu li.mega-menu > ul > li:nth-of-type(7n) {
clear: none;
}
#top-menu li.mega-menu > ul > li {
width: 16%;
margin: 0;
}

7 column Divi Mega Menu

1
2
3
4
5
6
7
8
9
10
#top-menu li.mega-menu > ul > li:nth-of-type(5n) {
clear: none;
}
#top-menu li.mega-menu > ul > li:nth-of-type(8n) {
clear: none;
}
#top-menu li.mega-menu > ul > li {
width: 14%;
margin: 0;
}

8 column Divi Mega Menu

1
2
3
4
5
6
7
8
9
10
#top-menu li.mega-menu > ul > li:nth-of-type(5n) {
clear: none;
}
#top-menu li.mega-menu > ul > li:nth-of-type(9n) {
clear: none;
}
#top-menu li.mega-menu > ul > li {
width: 12%;
margin: 0;
}

 

Looking to get your business seen? Then see us.

Web Site Developer Auckland | North Shore | Matakana | Warkworth | Omaha

Call 021 158 1400 for Web Design North Shore, Auckland

Share This