How to use Divis Mega Menu to create awesome custom menus

Divi is a really great theme with a lot of flexibility. However, the drop-down menu is something we quickly have had enough of. Often you can identify that a page is using Divi just by looking at the menu. The colored line below it, the distances, the hover color. We never fully understood why so many people spend so much time on creating good liking layouts but barely take care of the default look and feel of their menus.

In this post, we want to show you a really cool alternative to the boring default drop-down and give you an example of how you can style your Divi menu to not only look way cooler than the average but also show you some neat little tricks for styling WordPress menus in general. For this, this post is separated in 3 sections:

Using Divis mega-menu

Styling the drop-down menu

Adding custom images and icons to your menu

The Divi Mega Menu

It’s sad that there is no setting or even a hint in the theme customizer that this exists (well maybe there is something in the documentation but who has time to read that, am I right?). We used Divi for about one and a half year when we first heard about this awesome treasure, hidden in the depths of the themes code.

The mega menu basically lets you create a single full-width drop down with multiple submenus inside it and visible at the same time. Yes, the menu on this site is a mega-menu as well – a custom styled, though. To activate the mega-menu, all you have to do is to add “mega-menu” to your menus top level menu entries CSS classes. Keep in mind that it works best if you have 3 levels of menu entries. The first level gets the “mega-menu” class. The second levels are then the “categories” and the third level are the entries.

Check out the menu structure for our page. “Menu” is the top level entry (by the way, you can have multiple top level entries with the “mega-menu” class). The second level are the “categories” like blog, themes and modules. The third level are then the entries which are listed under the categories (e. g. the blog categories under the blog section).

By the way, if you don’t have the CSS field in your menu, you have to activate it in the Screen Options. Generally, the Screen Options are often overseen and are available in a lot of different places. You should check them out more often. 😉

That is basically it. You are now able to use the Divi Mega Menu. It is indeed that simple. However, it will look different to what our menu looks like. Probably more that. Thats because we added some CSS to style our menu. Which brings us to the next section.

Styling the drop-down menu

There are various tutorials on how to style the WordPress navigation. However, we want to show you how we styled ours. At this point, we would like to thank and credit Geno Quiroz, from who we have gotten most of the styling. He has an awesome tutorial to style the mega menu here.

Heres the customization he came up with:

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

/* standard drop down */

.nav li ul {

width:160px;

padding:0px03px;}

.nav li li {

line-height:14px;}

.nav li li a {

font-size:13px;}

#top-menu li li {

margin:0;

padding:0px5px;}

#top-menu li li a {

width:150px;}

/* mega menu drop down */

#top-menu li.mega-menu > ul {

width:600px;

padding:5px5px;

}

#top-menu li.mega-menu > ul > li > a, #top-menu li > ul > li > a {

padding:7px5px7px;}

/* default or centered style header mega menu alignment */

.et_header_style_left #top-menu li.mega-menu > ul {

left:auto!important;

right:0;}

.et_header_style_centered #top-menu li.mega-menu > ul {

left:auto!important;}

.et_header_style_centered #top-menu > li:last-child.mega-menu > ul {

left:auto!important;

right:0!important;}

/* first row of titles */

#top-menu li.mega-menu > ul > li > a:first-child {

border-bottom:1pxsolid#cc2a2a;

font-weight:bold;}

/* sub-menu items - 2nd level */

.nav li li li a {

font-size:13px;}

#top-menu li li a {

padding:0px5px;

font-weight:300;}

/* drop down menu items on hover */

.nav ul li a:hover {

opacity:1;

background-color:rgba(150,150,150,0.3);}

Please note that we already applied our primary color and some other color changes here. Well, that alone might work for his page or the sake of the tutorial he wrote but this brings a few downsides. Lets look at what happens if we only apply this CSS:

As you see, the mega menu looks slimmer already but what about the default dropdown? The first level indeed looks okay as well but if you have a sub-menu in there, it totally breaks the menu. So lets fix this by adding the following CSS. Notice that we use the “:not()” pseudo element to explicitly exclude the mega-menu from using these styles.

CSS

1

2

3

4

5

6

7

8

9

#top-menu li:not(.mega-menu) li ul {

left:160px;

top:-3px;

}

#top-menu li.et-reverse-direction-nav:not(.mega-menu) li ul {

right:160px;

left:auto;

}

This will put subsequent sub-menus on the right place. It also adds back the functionality to open sub-menus to the left when there would not be enough space otherwise.

Next lets tackle the blue line. Though it might work for your page, it not only is a first class indicator that you are using Divi but it also makes every Divi page somehow look the same and maybe you or your clients just don’t like it. So lets get rid of it. We do that by removing the top border from the sub-menu. Add the following to your CSS:

This will remove the border on the mobile menu as well but if you only want to remove it on the desktop, use the #top-menu-nav instead the #et-top-navigation. Now since we removed the border, the sub-menus are missing 3px of height so go back to the “#top-menu li li ul” selector and change “top: -3px;” to “top: 0px;”. Now the sub-menus are back in place.

We find, that the link should fill the whole sub-menu so add this CSS code as well:

1

2

3

4

5

6

7

8

9

10

11

12

#top-menu-nav li:not(.mega-menu) ul {

padding:0;

}

#top-menu-nav #top-menu li:not(.mega-menu) li {

padding:0;

width:100%;

}

#top-menu-nav #top-menu li:not(.mega-menu) li>a {

width:100%;

padding-left:10px;

}

The result looks like this and we are pretty happy with it:

There is only one thing which really annoys us. As soon as you are not hovering accurately over the top level entries, the drop-down is collapsed immediately. If you are looking for a fix for this issue, you should checkout the tutorial we have written on this topic: prevent Divi Mega Menu from collapsing.

The last thing we like to style is the current selected page in the mega-menu. By default, Divi overwrites the current selected page with a blue color but we also want to show off the ancestor of the currently selected page. Therefore we added this CSS:

CSS

1

2

3

4

5

#top-menu>li>a,

#top-menu li.current-menu-ancestor>a,

#top-menu li.current-menu-item > a {

color:#cc2a2a!important;

}

Adding images and icons to your menu

If you want to add a visual pleasing decal to your menu, you have basically two options. You can use images are a icon font like Font Awesome or Divis builtin one which is called “ETmodules”. You then again have two options on how to get that into the menu. You either can use HTML (most people don’t know that you can use html in the menu titles field) or CSS.

The HTML Way

The HTML way is probably the easier approach. Simply create a <img> tag with your desired image and add it to the menus Navigation Label.

You can either stlye the image inline or you could use the CSS Classes field to add additional classes so you can target your image. In this case, you could use one of these selectors to select the image:

.mega-menu img

.menu-item img

#top-menu a img

A good idea could be for example to vertically align the image with the text, change it’s size or do whatever else pleases you.

The second option is using :before or :after pseudo elements to add content manually. That is by the way how we did things in our menu. First, we added a bunch of classes to our second menu level (blog, etc.) and then used this CSS to add the icons using Divis icon font.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

/*******************************************

Icons for menu entries of mega menu

******************************************/

.menu-blog:before{

content:"w";

}

.menu-themes:before{

content:"";

}

.menu-modules:before{

content:"";

}

.menu-layouts:before{

content:"";

}

.menu-blog:before,

.menu-themes:before,

.menu-modules:before,

.menu-layouts:before{

position:absolute;

font-family:ETmodules;

font-size:16px;

font-weight:800;

padding-top:10px;

}

.menu-blog>a,

.menu-themes>a,

.menu-modules>a,

.menu-layouts>a{

padding-left:20px!important;

}

@media all and(min-width:981px){

.menu-blog:before,

.menu-themes:before,

.menu-modules:before,

.menu-layouts:before{

top:0;

left:0;

padding-top:0px;

}

Whats that square you might ask – depending on which browser you are currently using. Well, thats the unicode character used by the icon font. Though they look the same since the browser does not know how to render them appropriately, they are in fact different. If you wonder where you can get them from, simply fire up the Divi Builder, open a module with a icon field (like the Button or Blurb module) ad open your browsers element inspector. By inspecting the icons, you can out the unicode character to use.

Now it’s just a matter of copy and paste the character from the data-icon field to your CSS.

Coclusio

12 Comments

bruno
on 21. January 2018 at 11:39

Thank you for this article.
Finally a detailed article on how to achieve
an original menu.
The customization of the menus would really
a + in Divi and Extra themes.

Hi Jan, Thanks for this. I just about got things working, however, I for the life of me can’t figure out how to have the mega menu show up directly below the top nav. It’s always moved over to the far right. I have also tried the CSS code to keep it from collapsing immediately which sort of works but it just has it disappear but reappear with a flash. Weird. Would you mind providing some thought to it?

Sure but I would need to have a look at your page. Are you using many plugins? Sometimes plugin add their own CSS and it conflicts with Divis own CSS. Bootstrap for example has a container class which causes conflicts with Divi.

We use cookies to ensure that we give you the best experience by analysing usage and traffic on our page. If you want to learn more about how we use cookies or if you want to revoke the usage of analytic programs, please visit our privacy policy.Accept!