Sticky header full width (wide) - Content Boxed

Dear Bricks Experts :slight_smile:

Is there a way to have a sticky header with full width and the rest of the page content boxed? (different color for content and site backdound) I tried to play around with the General Settings but was not able to find how to achieve this.

thx for your ideas!

Hello @Alexa,

Yes it is. Just follow this process:

1- Create a first template with a full-width (Template type: Header)
2- Activate the sticky option on the header section (Style > Layout > Positionning > Position > Sticky)
3- Create a second template with a specific width for the page content (Template type: Single)
4- Apply the site background color to the body tag
5- Apply the page content background to your second template
6- Check that you haven’t applied any conflicting theme style settings (e.g. section width, as section is used in both templates)

Have a great day,
Thomas

Hello Thomas,
Thank you for taking the time to explain how to do this. Could you go a bit more into detail of where to apply which settings like you did with activating the sticky option?
“Create a second template with a specific width” - where to set the width - in “Settings > Page Settings > General” ? Because this also makes the header shrink to the size I set here.
“Apply the site background to the body tag” - via “Settings > Theme Styles > General > Site background” ?
Would I need to set any conditions? Do I need to also do this for other templates like Archive / Product Archive / Single Product etc. ?

I would love to find the most effective and smartest way.
thx again!

Hi @Alexa,

I just made a small video to explain the beginning of the process regarding the header:

To answer your questions:
1- The width need to be set in each container. The default Site layout need to remain to wide (Theme style > General > Site layout)
2- Yes, the color background can applied to the body tag as you mentionned (Settings > Theme Styles > General > Site background)

Have a great day,
Thomas

ok, so far so good. but there is no option to set the background of the content so this means that there is no way to have a different color for content and site background. Sometimes a picture hepls, as in your case a video did:

I made another video for the second part.
But it is pretty straightforward too. What we want to do is that

https://screencast-o-matic.com/watch/c3XXI1VUVmg

Have a great day,
Thomas