Themes: Faking the boxed layout with full width menu

Faking the boxed layout with full width menu

Last Updated: 1 month ago

FAKING THE BOXED LAYOUT WITH FULL WIDTH MENU

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.

Code main-content

#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 customizer 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.

Code main-footer

#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 full width menu