Quick Snack: Faking the Boxed Layout with Fullwidth Menu

by | Apr 1, 2016 | Boxed, CSS Tips & Tricks, Menus

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

Quick Snack: 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.

faking the boxed layout with fullwdith menu tutorial for divi

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.

faking the boxed layout with fullwdith menu tutorial for divi

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);
}

 

faking the boxed layout with fullwdith menu tutorial for divi

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

Michelle Nunan is a multi-award winning marketer & trainer and freelance web designer as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Join me on Facebook

WP Theme FAQs
Divi Switch
WordPress Theme Editor
Stock Images for as little as $0.69 each
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

Pin It on Pinterest

Share This
pro-membership

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!