PRO HEADER | How to create a second bar (sticky) that appears when you scroll away from header?

[pamadesign]

Hi guys,

this time I used a Header from the Design Cloud. Everything is fine except the fact, that i cannot figure out how to create a second bar -that is sticky and contains a different logo- wich only appears, when you scroll down and leave the Header to the first section…

I hope my topic is clear enough

Cheers, Pascal

[prakash_s]

Hello Pascal,

Thanks for writing to us.

To add a new Bar in the Header Builder. Go to Pro–>Header -->Select your Header and click on Edit —>Click on Add Bar
Now add the elements that you want to display in the Header Bar.

Now click on the click on the Magnifier icon to Inspect the Bar 2.
After that set Sticky Bar on of the Header
Now Set the Bar Hide Initially

Please have a look at the given screenshot below.

Thanks

[pamadesign]

that little checkbox was the gamechanger! Excellent, thank you!

Just one more question… If the new sticky bar shows up, when you scroll down you can see both bars at the same time… Is there a way, that you only see one bar at the same time?

Thanks, Pascal

[prakash_s]

Hello Pascal,

Go to Bar 1 and click on the magnifier icon to inspect the element, now go to “Shrink Amount” and set it as “0”.

After that go to Bar 2 and set the “Shrink Amount” as “1”

Hope it helps
Thanks

[RACHEL90]

sorry for hijacking this thread, i need an answer to some related issues. I did what you said here, but what if i need the sticky bar to be a bit transparent, then the main header shows behind it. For instance i set the second bar’s opacity to 0.7 and i can see the main 1st bar beind. How to hide the first bar completely when scrolling down as is on your main x theme\?

[prakash_s]

Hello Rachel,

Thanks for writing to us.

The option with a sticky second bar will work best with the solid colour, what you are trying to achieve is a part of customization and beyond the scope of our theme support. I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where the customization questions are answered.

Thanks for understanding

[pamadesign]

Hi, I’ve tried your suggestion, but now i have two sticky headers?!
I don’t think, that this was your plan I’m looking forward to your answer.

Thanks! Pascal

[ruenel]

Hello Pascal,

You will need to set a Trigger Offset to at least 200 or 250 pixels so that the 2nd sticky bar will only appear after you have scrolled down passed down the first bar and will not overlap with each other.

Hope this helps.

[pamadesign]

That’s it! Thank you

[ruenel]

You are most welcome Pascal!