Archived topic
Boxed layout
16 replies · Started by Scott on June 30, 2015
Absolutely! This can be done inside "Customize > Layout".
1. Customize > Layout > Header Layout: Contained
2. Customize > Layout > Navigation Layout: Contained
3. Customize > Layout > Content Layout: One Container
Let me know if you need more info :)
Further to the above, how would I add padding around the header, navigation and content container?
Thanks!
Our Spacing add-on allows you to add spacing around the header and content super easily.
Or are you wanting padding around the entire website container?
Thanks Tom.
I have added spacing to the content and header now. How can I add (white) spacing to the left and right of the navigation?
That's a little tricky because the navigation doesn't have a container by default.
Do you have GP Hooks?
Yes I have GP hooks
Cool.
1. Go to "GP Hooks > Before Header" and add this:
<div class="site-wrapper grid-container grid-parent">
2. Go to "GP Hooks > wp_footer" and add this:
</div><!-- .site-wrapper -->
3. Add this CSS:
.site-wrapper {
padding: 20px;
}
Adjust the px as needed - you can also remove the spacing you added to the header and content :)
Unfortunately that didn't work for me. The navigation still has no padding to the right and left of it and I still needed to enter spacing for content and header.
Any chance I can get a link to your site?
Ah, we forgot to add a color!
Try this for your CSS:
.site-wrapper {
padding: 20px;
background-color: #FFF;
}
Ha thanks. Working great now!
Awesome! :)
Hi Tom,
first I'm very pleased with GP, kudos to you!
I'm trying to achieve the same things but in my case the primary navigation is a full width banner above the header and the secondary navigation below the header.
I would like to leave the primary navigation (and the header itself maybe) full width and add a padding for the secondary navigation, body content and footer, so the wrapper must comprehend only these elements I suppose.
I'm trying to achieve something like this http://www.effektiv.fr but + the primary navigation full width above the header.
I tried to put
Please could you help me with that?
Also I would like to change the behavior for small devices and smartphones (like the site I linked before), how can I do? Is it better to write the css with media queries only for big screens or instead change it for exclude the padding for small devices?
And last how can I put a top margin above the footer so that it looks a separate container (please refer to the same site) if I use one-contrainer option in GP?
Thanks and have a nice day.
Hi there,
Any chance you can start a new topic and link me to what you've created so far?