Archived topic
Page Container Wrapper (padding) 'V' Transparent Header & Navigation Query
3 replies · Started by Nick on September 15, 2021
Hi,
I'm new to GeneratePress and attempting to get my first site built and need some help.
In the private info is the URL of my design concept and a link to the test URL I'm working on.
I'm not sue on the best way to work with Generate's different elements to achieve my design. The majority of the time I want a 40px gap around the outside of my site content. But at times with some rows of content and with the Footer I'd like those elements to go full width to the browser edge. What is the best way to mix and match these elements with Generate?
So far I've applied a Page Container Wrapper using hooks to add 40px of padding. And then I've been trying to apply a transparent header and make the page content appear behind the header. But the two appear to conflict. If I apply Merge to the home header I lose the container padding and the content still does not go behind the header, its still appearing below the header. The only way to get the content behind the header is to remove the Container Wrapper hooks. At which point the design touches the browser edges which I don't want.
I'm not sure if adding Genesis blocks plugin has had an effect on this. I need some more options for controlling spacing on rows of content so have added and started using this. Is this a good or bad choice of plugin for use with GeneratePress? I'm trying to move away from WPBakery/Visual Composer to a lighter solution.
Many thanks,
Nick.
Hi Nick,
I would recommend using GenerateBlocks as your block editor.
https://wordpress.org/plugins/generateblocks/
You can easily set padding or no padding to each Container blocks of GB, no hook element will be needed to achieve this layout.
https://docs.generateblocks.com/article/container-overview/
https://docs.generateblocks.com/article/grid-overview/
To merge the content with header, you need a header element just for the merge feature. Here's a tutorial video:
https://www.youtube.com/watch?v=TP8mgBQTgGg&t=12s&ab_channel=GeneratePress
Let me know if you need further assistance :)
Hi Ying,
Many thanks for the advice.
I've switched to GenerateBlocks successfully and rebuilt the homepage successfully. And got the header working.
I've got some more questions about the header. I want to add a bottom border but need to control the width. I'm not sure if I need to add a hook to add an extra div inside the header to apply a border so that it's the width of the logo and navigation. My current attempt goes to the browser edge. Please tell me if I need to start a new forum topic to ask this.
Thank you,
Nick.
Try use this CSS:
#site-navigation.auto-hide-sticky .inside-navigation {
border-bottom: 1px solid #ffffff;
}Instead of adding border to this selector:
.auto-hide-sticky {
padding: 60px 60px 20px 60px;
border-bottom: 1px solid #fff;
}Let me know :)
