How to Underlap Rows in Header Using Calc

Hello Themco!

It seems possible to underlap header bars using Z-index, absolute position, and calc for the top margin. However, I can’t quite figure it out.

Questions:

  • How do I write a top margin calc for my second bar so it underlaps Bar 1 and aligns to the top of the page?

  • When I set the Bar 2 to absolute, Bar 3 moves up so that it is aligned with the bottom of Bar 1. How do I prevent this?

Site URL: http://xxj.29c.myftpupload.com/
What I want layout to look like:

Thank you!

Hi @Hjfinch,

To achieve that look:
1.) Set the first bar( BAR with text welcome) Absolute. This will make you second bar with 2 container overlap.
2.) On the second bar container, add top padding until the images are no longer behind the first bar.

If this doesn’t achieve what you want, it would be best to share site credentials inside a secure note so we can check your setup better.

Hope this helps.

1 Like

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