Transparent header bar

Support
#1

I am trying to create a header bar similar to this one: https://spark.com/

I followed the instructions from another forum post by creating two headers and globally assigning them. But there appears to be the only bar that’s white, a new bar that is transparent but still has a shadow, and I don’t see the bar that turns blue when you scroll down.

Can you help me clear this up? I’ll need to send you login credentials as my website is not public yet.

#2

Hi Bryan,

Thank you for writing in, actually, the idea is to have 2 Bars (not header), the first bar will be your static and transparent bar, while the second bar will be the Sticky Bar and has a solid color background, and enable the Hide Initially so it will only show when you scroll down.

More details on the video below:

Better Headers: How to Configure Sticky Headers

You can zero out the box shadow on the Bar configuration.

Hope it helps,
Cheers!

#3

Thank you for this. How do I get rid of the original header menu bar removed, as the 2 bars are loading below the original bar, and add a menu on to the bar configuration. Thank you.

#4

Hello @BKosarek

Follow the listed method for a transparent navbar and coloured when it scrolls.

  1. Create a transparent bar
  2. Duplicate the transparent bar
  3. Set the background of the duplicated bar to a solid colour then set it to Sticky

To set the delay, increase the Trigger Offset
Here’s a video recording of the setup:

Thanks

#5

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