Pro - Transparent Header with Header Builder - Calculate Margin for Page Content

[jgille07]

I’m trying to build a transparent header with a header that overlays a slider element on the home page.

I’m able to get the slider to go beneath the header so the header text is overlayed on the slider, however I’m only able to do this by hardcoding a negative top margin for the slider, but the height of the header bar changes with the size of the screen.

How do I create a transparent header so the negative margin of the slider changes with the height of the header bar as the screen size changes?

Should I create a header with the slider in another bar below it? Or keep the slider on the home page in the page builder?

Page URL: https://getmoretaps.com/

[christian]

Hey @jgille07,

Your site’s on under construction so I couldn’t see the actual setup. But, I believe you’re using Pro Header Builder and with that, the solution is Bar Absolute Positioning. Watch the video below to see how it works. In the video, you’ll see the bar has solid background but it’s applicable to transparent bars also.

Better Headers: Layering Bars with Absolute Positioning

Hope that helps.