"Floating" header

Hi,

I was wondering if it is possible to create a left-side header in Pro that is detached from the side (so you can see the background on both sides of the header)?

Something like this:

Kind regards,
Roel van Houten

Hi Roel van Houten,

It is possible using left sidebar on stack with no content background defined like Integrity
1.) Add a bar. Choose Left.
2.) Inspect the BAR, under Dimensions > set width. Let say 20em. Make sure background is transparent so we can see the content behind the bar. Also set Outer Spacing to 0. Here’s the complete setting includign FLEXBOX.


3.) Inspect container. Set the width. Should be less than the bar. The difference on the container width and the bar width is the space on the left where you want to show the background. Set the container background too.
4.) You may add the background image on PAGE SETTINGS PAGE BACKGROUND

5.) Add your content as needed. Make sure to use NO CONTAINER PAGE template too.

This design means the header is FIXED LEFT. The space on the left of the container will show the page background but there’s no content in there. The content you will add on the page editor will be on the right of the left header. Once you add a background on your page content, you can’t see part of your page background. Also note I

See this sample setup: https://screencast-o-matic.com/watch/cYeZDYyvB9

For more detailed guidance on theme’s capability and features, you may check our documentation here.
Hope this helps.

1 Like

Ah! Thank you! This was exactly what I was looking for. Great instructions.

You’re welcome!
We’re glad @Jade were able to help you out.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.