Pro header transparent to solid colored header

Support
#1

Hi everyone!

So, I recently upgraded to Pro, specifically to take advantage of the header/footer builder. While I absolutely love it, the header functionality on this site is a bit tricky and I’m wondering if I can achieve what I have now with the pro header and without relying on custom javascript.

Basically, I have a full-width revolution slider on top of which sits a transparent header with links. As you start scrolling and enter into the second section, past the slider, the header becomes a solid color (white). The existing configuration has some problems on the mobile side because when you hit the menu icon, you end up getting shot up. Anyways, that’s besides the point.

The question is, can this be done through the header builder by creating multiple headers? I have added a link to the site.

#2

Hi There,

I could not check your site because it has under construction activated, if you need us to take a closer look please provide your login credentials in a secure note.

To achieve the effect you are looking for you will need to create two bars. Pro does not offer a functionality which the bar changes color on scrolling but it offers a different approach which brings a similar effect.

Your first bar, which you will set over the slider, you will set with a transparent background, absolute position and fixed (nonsticky)

Then you can clone this bar, add the desired background color, switch position to relative.

Turn on Sticky, once you turn on sticky you will have the option to hide it initially, so you can set to hide initially and to the bar appear after certain point, for example as soon as the other bar disappear on scrolling or once you have passed the slider.

Hope that makes sense, if you need further assistance please let us know

Thanks

#3

Thank you @Joao!

Short and sweet solution. Worked like a charm! I can’t get enough of this Pro builder! So much potential.

This is truly a game changer!

Thanks again!

#4

Glad we could help.

Cheers!

#5

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