Have you ever found yourself in the situation where you can’t fit all your links in the menu without it breaking onto two lines? Or maybe you wanted to have a full width navbar like I have on this site?

Although the Divi options lets you increase the max-width of the site, it doesn’t let you control the percentage width, which makes it impossible to go full width.

Luckily, with a little bit of CSS magic, it’s really easy to increase the width of your menu, footer, and also the whole website.

You can add the code below into your child theme style.css (or the custom css tab of your Divi Theme Options), and then just update the width % and max-width values to suit your needs.

I’ve divided the code up so you can pick and choose which part of the site you’d like to increase the width of. If you’d like to increase the width of the whole site, then just use the code at the end.

Increase width of the Divi menu:

#main-header .container {
width: 90%;
max-width: 1280px;
}

Increase width of Divi page content:

.et_pb_row {
width: 90%;
max-width: 1280px;
}

Increase with of Divi footer:

#main-footer .container {
width: 90%;
max-width: 1280px;
}

Increase the width of all 3:

.container,
.et_pb_row {
width: 90%;
max-width: 1280px;
}

Let me know if you have any questions in the comment section below! Or feel free to drop me an email at: [email protected]

You can also checkout more Divi tutorials below.