Q4: Faking the Boxed Layout with Fullwidth Menu

So this has been asked a few times around the Divi community but I haven’t seen a simple solution. How do I use the boxed layout option but keep my menu fullwidth? The answer is you can’t, at least not using the current Divi settings. So here is a Quick Snack to fix that for you.

Here’s an example of what we are going to create.

So let’s get cooking!

Ingredients

The Divi Theme or Divi Builder Plugin from Elegant Themes

Cooking time

This should take you around 5 minutes max.

Preparation

The first thing we need to do is set up our layout. So navigate to Divi>Theme Customiser>Header & Navigation>Primary Menu Bar and select the Fullwidth Menu option, the hit Save & Publish.

Method

So now we have our fullwidth menu, we need to fake the look of a boxed layout for the main content and we’ll do this by limiting the width of the main content and adding a box shadow via CSS.

Copy and paste the CSS below into your Child Theme style.css or if you aren’t using a child theme (which you really should be) then paste into the Divi Theme Options epanel custom CSS section.

What we are doing here is limiting the width of the main content container to 80%, aligning the content centrally using the margin:auto property and adding a shadow effect to the main content container to mimic the effect of the boxed layout.

#main-content {
    max-width: 80%;
    margin: 0 auto;
    box-shadow: 12px 0 15px -4px rgba(215, 215, 215, 0.8), -12px 0 8px -4px rgba(215, 215, 215, 0.8);
}

Now as we have the customiser set to fullwidth, the footer bar is going to be fullwidth too, and that maybe what you want. But if you want the footer bar to be boxed too then add the same CSS for the footer as well

#main-footer {    
    max-width: 80%;
    margin: 0 auto;
    box-shadow: 12px 0 15px -4px rgba(215, 215, 215, 0.8), -12px 0 8px -4px rgba(215, 215, 215, 0.8);
}

And that’s it, easier than you thought it would be eh?.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.

Michelle X