Header as background

Support
#1

Hi guys,

Don’t know if it’s possible… :slight_smile:

I want to create a header with 1 bar top fixed (including inline nav). Pages needs to scroll over this header. After (let’s say) 100px a second bar has to appear. This second bar will work like a normal sticky bar.

To explain further:
A dark header is visible. When you scroll down, the page slides over the fixed header. A second header kicks in and sticks to the top while scrolling down.

Is there an way to build this?

#2

Hi @kenatnet,

Thanks for reaching out.

Yes, it’s doable in Pro custom header. Simply add two header bar, one header bar is static (make its background dark too), then the second header bar is sticky with offset trigger equal or greater than the first header bar height, then hide it initially.

Here is a video recording as a reference https://www.dropbox.com/s/mzwoihjhgjre0ns/bandicam%202018-12-02%2023-58-21-668.mp4?dl=0

Thanks!

1 Like
#3

@Rad Wow, what a great support, thanks for the answer with a video!

Than one more step… Is it possible to fix a logo and navigation in ‘Bar 1’? So that the content will not move to the top of the page while you scroll. Like a layer (the page) sliding over a fixed header (bar 1) with a fixed navigation line.

For example:

This is the same effect with a footer (but than contrary for the header). Footer is behind page and will be revealed when you scroll down (text was already there). :slight_smile:

#4

Hi @kenatnet,

Glad it I could help :slight_smile:

About your next question, It’s not currently possible since elements added to each header bar are restricted to each. Sticky and fixed positioning only applies to the header itself.

Thanks!

1 Like
#5

Ok, thanks for your time and help @Rad ! :slight_smile:

#6

You’re most welcome!
We’re glad @Rad were able to help you out.

1 Like
#7

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