Divi has some built in breakpoints to support responsive design. One of them, at 980px, changes the desktop menu into the hamburger. Unfortunately, above 980px, menus that contain a lot of text will wrap onto a second row. In this article we talk about some ideas for making the responsive Divi menus on desktop (at viewport widths greater than 980px). This should make it possible to avoid having the desktop menu wrap onto a second line.

We are going to use some CSS to make changes to the menu layout. We recommend using a child theme for this. There are many good articles on the internet about creating child themes. You can, of course, either use a CSS plugin or put your CSS into Divi->Theme Options->Custom CSS.

Stating the Obvious

This may be stating the obvious, but let’s just go over how to take up less space with the menu. With a smaller menu, there is less need for it to be responsive. First of all, are you sure you need all of those items in your menu? Could any be removed or moved to submenus? If you really need all of those items on your top level menu, could you change any of the wording to use less space? Lastly, have you considered using a vertical menu? Regardless of the design implications, using a vertical menu will allow a lot more menu items….

Ok, if you are absolutely sure you cannot reduce the space taken up by your menu…. here are some suggestions to create responsive Divi menus and hopefully, making your menu less likely to wrap….

Divi Menu Structure

First though, let’s have a look at the desktop menu structure. We are looking for ways to change it to save space. The example here assumes the Default layout is being used. There are a few tools for looking at the structure of a live website. Here is what the menu looks like using Google Chrome Inspect –

The first thing to note is that the page-container sets aside enough margin-top to avoid overlapping the menu. Our website says it has a margin-top of 80px. You will need to have your page scrolled to the top to see this.

Next, header#main-header is the eh…. header ūüôā It organises the logo, menus etc –

The child of header#main-header that we are interested in is .et_menu_container. This holds the logo and menu. It is centered by using width:80%, margin-left:auto,  margin-right:auto. So the margins are 10% on either side.

The .et_menu_container holds both .logo_container and #et-top-navigation. The interesting thing about these two objects is that #et-top-navigation is a float:right with a lot of margin-left attached to it but no margin or padding on the right. So, the default menu layout is right aligned. Also, the amount of¬†margin-left¬†added¬† has been carefully calculated by Divi for #et-top-navigation to not overlap the logo. Here is what #et-top-navigation looks like –

Now we get to the actual menus themselves. In fact, #et-top-navoigation contains both the desktop and mobile menus. They are called #top-menu-nav and #et_mobile_nav_menu respectively. As you might guess, the mobile menu container has display:none set above 980px.

Finally, #top-menu-nav contains a single object, #top-menu.nav, an unordered list, which in turn holds all of the top level menu items. These are all list items (li) and include their ‘menu id’ as part of their name. Generally, we will want to target all menu items, rather than individual items, so we can ignore the menu id. The only exceptions to this could be the menu item for the current page and the menu item being hovered over. These are each given an additional class by Divi and we can target them with li.menu-item .current-menu-item and li.menu-item .et-hover.

Here is what the menu item looks like when inspected –

Within each menu item is the actual link itself, a simple anchor –

If you use Google Chrome Inspect and look at the Computed panel (you may have to select it or scroll down to see the right values) you should be able to see what the current font size is for menu items. You will nee to be inspecting a menu item to do this or you will see the wrong values –

Making the Menu Container Bigger

If you are comfortable that this does not negatively effect your design, we can make the menu container bigger. If we are using the default menu structure, with the logo on the left, we can extend the container to the right. Here is some CSS to do this –

.et_menu_container {
	width:90%;
	margin-right:0%;
	margin-left:10%;
	max-width:100%
}

Though we have done it in the example above, we probbaly wouldn’t ever reduce the margin-right to 0% because we don’t like having no margin. But you can adjust this to your taste. The key is that the container width and margins add up to 100%. Also, if you are using the default menu structure, with the logo on the left, it’s not sensible to change the margin-left setting from 10%, because Divi carefully positions the logo assuming that there is 10% of margin for it to sit inside. This keeps the logo and menu from overlapping when using the default header layout with the menu on the left. Lastly, we need the max-width set to 100%. By default, it is set to 1080px. Changing it to 100% allows us to change the width and expand the menu container.

If you are using a centered logo layout instead, you should be able to reduce the margin-left as well.

After these changes, use Google Chrome to check the effect. You shoulc be able to see that .et_menu_container is wider than before and that the margins are smaller. In any case, you should be able to verify this simply by looking at the menu.

So, the upshot of this should be that you have more space for your menu. Depending on your menu, this might be all you need to avoid the menu wrapping. On the other hand, you might not like having such a wide menu. Regardless, it also means that the viewport width at which the menu wraps will be bigger. So let’s take a look at what we can do to make the menu responsive to the viewport width.

Responsive Divi Menus

The width of the Divi menu is determined by the amount of text it contains and by the number and width of the gaps between menu items. So, as the viewport shrinks,  we could reduce the font size of the text or reduce the padding-right on the menu items (the gap between them). Depending on your font, you might also think about changing what typography people refer to as the tracking, this is the spacing between characters (in CSS, it is the letter-spacing).

Using CSS, the way to make changes that are dependent on the viewport width is to use a media query. These can be triggered by quite a lot of different events but we will mainly be using the viewport width. We will set the media query to respond to a set of spcified viewport widths or ‘breakpoints’. There are breakpoints already built into Divi, for example at 980px the layout changes from one designed for desktop to one designed for tablet. Divi uses media queries to do this.

Here is an example of a CSS media query –

@media (min-width:980px) 
{
    ul#top-menu.nav a {
        font-size:10px !important;
    }
}

This sets the font-size to 10px when the viewport width is greater than 980px. So, you can see that, by using a series of media queries, it is possible to make the menu font size ‘step down’ as the viewport width changes. Something like –

@media (min-width:1600px) 
{
    ul#top-menu.nav a {
        font-size:36px !important;
    }
}
@media (min-width:1200) and (max-width:1599px) 
{
    ul#top-menu.nav a {
        font-size:18px !important;
    }
}
@media (min-width:980px) and (max-width:1199px) 
{
    ul#top-menu.nav a {
        font-size:12px !important;
    }
}

This sets the font size to 36px for viewports wider than 1600px, to 18px when the viewport width is between 1200px and 1599px and to 12px when the viewport width is between 980px and 1199px. We don’t bother to specify the font below 980px because that is the breakpoint at which the Divi hamburger menu appears.

You can use the same approach for the gap between the menu items. The CSS below reduces the gap to 5px by adjusting padding-right. Again, you would want to put this inside a media query to use it.

ul#top-menu.nav .menu-item {
   padding-right:5px !important;
}

Working Out The Menu Breakpoints

Though there are a set of breakpoints already built in to Divi, they are based on viewport sizes and it is actually more useful to work out menu-specific breakpoints. In other words, find the points at which your menu wraps and reduce the menu width just before that point to avoid this. Here’s a description of how we might use Google Chrome Inspect to do this. First, start with the widest possible vewport, then grab the right webpage boundary and drag it slowly to the left, decreasing the page viewport width and increasing the width of the ‘Inspect’ sidebars on the right. You should see the page size displayed near the top of the boundary. Note the webpage width at which the menu wraps. It looks like our menu wraps just below 1250px so that is the number we will use.

Now just add some CSS to decrease the font size at that 1250px breakpoint. Make sure this is working by refreshing the page and moving the boundary through the breakpoint again. You should see the font size decrease (and the menu width shrink). If we found no other breakpoints where our menu wrapped, our code might look something like –

@media (min-width:1250px) 
{
    ul#top-menu.nav a {
        font-size:24px !important;
    }
}
@media (min-width:980) and (max-width:1249px) 
{
    ul#top-menu.nav a {
        font-size:18px !important;
    }
}

A couple of points now to think about. When you create a media query to decrese the font size, the more you decrease it by, the narrower you can make your viewport before the menu wraps again and the fewer breakpoints you will need. You could also argue that the more you decrease the font size by, the more noticeable the change will be to the website visitor. Don’t forget though that it is only designers like us who sit and change the viewport size to test the responsiveness of the site. Most users will keep the viewport at a constant width.

Using Calc Instead

The approach above can be quite tedious to build. There is another way though to build responsive Divi menus that avoids working out breakpoints and might give you a smoother transition as the viewport size is changed. A few people have written about this technique and you can find references to some articles at the end of this blog. The idea is to use the¬†calc¬†function to scale the font size automatically and smoothly, using the viewport width. We can do this because we can use the viewport width in the calculation. Here is an example –

@media (min-width:980px) and (max-width:1600px) {
    ul#top-menu.nav a {
        font-size: calc( 16px + (36 - 16) * (100vw - 980px) / (1600 - 980));
    }
}

@media (min-width:1600px) {
    ul#top-menu.nav a {
        font-size: 36px;
    }
}

In explaining this, let’s deal with the easy part first – in this example, above 1600px the font size is a constant 36px. From 980px to 1600px though, the font size is calculated using a linear scale proportional to the width of the viewport. The calculation uses 100vw to get the width of the viewport. As this changes, the font size is automatically recalculated. The maths in the example scales the font size between a minimum of 16px and a maximum of 36px, proportional to the current viewport width, from a minimum width of 980px to a maximum width of 1600px.

So, if you want to change the upper limit of the viewport width that this covers, you need to change the 1600px in both media queries and the 1600 in the calculation to the new value. If you want to change the lower limit of the viewport width, you need to change the 980px in the media query and both the 980px and the 980 in the calculations. Similarly for the minimum (16 and 16px) and maximum (36 and 36px) font size used.

Just be aware that the calc function is very fussy about the layout (removing the spaces will stop it from working for example) and also about the measures being used – the numbers in the calulation need to use vh, px or nothing, as shown above.

So, in use, the key to this approach is to choose appropriate maximum and minimum values for the font size. Simple trial and error will find values that will stop the menu from wrapping.

Subscribe To Our Blog

If you found our blog article useful, why not subscribe? Get all of our articles and tutorials delivered direct to your inbox!

You have Successfully Subscribed!