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.
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)
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!
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)
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: