Since you’re on Pro, you can simply create a custom header and set it’s initial position to absolute (instead of relative) and background to transparent, and make it sticky bar too. Then simply assign that header to your target pages.
But if my header is made up of three bars (top bar, menu, social icons bar) and I set all three bars to absolute positioning then they all sit over each other. How should I set a transparent header if I’ve got more than one bar in the header?
You can set each of the bars to have a transparent background so that all on them will be transparent. Or maybe you can set a bar that displays upon load with a transparent background and another bar that is hidden at first and will display upon scrolling with a solid background.
That’s not the problem: I just need to make the header as a whole be absolute positioned (which would keep the 3 transparent bars in the right spot relative to each other but show the whole header over the first section’s content). What’s happening now is if I set all three bars individually to absolute positioning they cover each other.
You need to only have 1 bar set to absolute position. The top bar, menu, social icons bar should be inside that bar. I can now see on your setup that they are inside the containers which is right. Then, set each of the containers to relative position. From here, you can adjust each of their width, margins or paddings to achieve the layout that you have in mind.
Sorry, not sure I’m understanding you. Here’s what I’m trying to achieve:
[top bar with various elements]
[Menu bar with left menu items, Logo, right menu items]
[bottom bar with social icons on the right]
These three together form the header, which I want to be transparent and sit on top of the first section content.
It sounds like you’re suggesting put all the elements inside the same single bar, but the header builder doesn’t seem to support that. It wants to have items within a bar positioned horizontally relative to each other (which makes sense since that’s why you’d want multiple bars in the first place.
Yes, I’ve understood clearly. The reason why we put the three items you’ve mentioned inside just one bar is because setting these three to sticky is regretfully still not supported by Pro. We have to add these inside each container with some CSS codes to achieved the needed layout. E.g.
[top bar with various elements] - 1 container, float: left; width: 100%; clear: both;
[Menu bar with left menu items, Logo, right menu items] - 1 container, float: left; width: 100%; clear: both;
[bottom bar with social icons on the right] - 1 container, float: left; width: 100%; clear: both;