Header with two sticky bars

Support
#1

Hi there,

I’m trying to create something similar to the following functionality.

https://royalcastle.co.uk/

So my thinking was three separate bars. Bar 1 would contain the hero background image. Bar 2 would be for the logo in the top left (or wherever I put it) - that bar would be sticky.
Bar 3 would contain the navigation element and would also be sticky, but be positioned below or at the bottom of Bar 1.

I’ve been playing with it for a while, my problem is that if I make Bar 1 (background image) position absolute, Bar 2 sits over it fine. But unfortunately, Bar 3 (bottom bar with navigation) sits directly over Bar 2.

What am I missing?!

Thanks,
Shaun

#2

Hey Shaun,

Thanks for reaching out!

The reason why the Bar 3 is below the Bar 2 because the Bar 1 is set to position absolute. I suggest that you try these sequence.

  • Bar 1 ( Logo ) - then set it to position absolute
  • Bar 2 ( Background image )
  • Bar 3 ( Navigation Inline )

Hope that helps and let us know how it goes.

#3

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