Aligning Header Bars

I’m driving myself crazy with this. I’d like to have the Cart Modal layered over the Header background image (bottom right) instead of shown in a new bar.

I’ve tried adding a new container to that bar but i just can’t get it to stop interfering with the existing bar and can’t get it into the bottom right. Is there some sort of info on this because I’ve run through a bunch of videos and can’t find anything that helps.

https://frameandthread.com/shop/

Hey Stella,

Thank you for the very detailed post information.

Kindly edit your custom header and click the 2nd bar. In the bar settings, set the “Initial Position” to Absolute and make sure that your content width is 100%.

We would like to know if this has worked for you.

Thank you for your suggestion. Unfortunately, it didn’t change the alignment.

To make sure I wasn’t too vague on the explanation of what I’m trying to do, it would be this.

Cart Modal moved to bottom right of the background image and “Frame & Thread” logo would stay in the same position (everything I’ve tried to get the Cart Modal into that upper bar causes the “frame & Thread” logo to move from its position.

Hey Stella,

Your first setup is easier. Add the another container within the bar and set the Bar’s Flexbox > Child Placement to Column.

With your current setup, you’ll need also to set a negative top margin to the bar. This is a quick but “hacky” way to achieve the layout that you need.

I believe you know that you’d also need to set the background of the bar to transparent.

Hope that helps.

This is as close as I can get without cutting of parts of the background image (if I use the “absolute” setting). The Frame & Thread logo is moved up with this set-up (undesirable) and the Cart Modal is centered instead of pushed to the right.

Hey Stella,

You’re close. I’ve replicated the setup that you want in this video: https://youtu.be/omY7i4ppbzg

All I did there are available in the builder. Follow the setup below.

  • Set the Bar’s Align Horizontal to Stretch and Align Vertical to End.

  • Set the top and side margins of the Headline element to 0 and set the bottom margin to give space between the headline and the cart button.

  • Set the margin for the cart button.

Hope that helps.

Got it! Thank you so much for sticking with that. I really appreciate the help!

Glad that we could be of help.

Cheers!

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