Move header down with scroll bar

Support
#1

Please reference https://rivian.com. There are two things on this site I am trying to achieve on the site I am building.

On this Rivian Website, the scroll bar is transparent to an image below. In X-Pro, I can set the nav bar to transparent, but how can I get the content to go up and behind it?

The nav bar on Rivian.com also has this interesting feature. When you scroll down the page, the nav bar moves up and out of view. However, no matter how far down you are on the page, as soon as you start to scroll back up, the nav bar appears no matter what vertical position you are at and the nav bar background changes to white. I’m assuming this is going to need some custom-coding?

I have checked the forum and there’s no postings about such an effect. Also, nothing in the documentation. In fact, in general, the documentation only provides the most basic features of the Theme; it does not get into detail about how to use some of the more complex things. Is there any, more in-depth information available anywhere?

#2

Hello @mcaravaglia,

Thanks for writing in!

The header of the example URL may be possible with the X or Pro theme with custom coding. Be advised that this is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance. Even if the custom JS code were previously given by a Themeco staff, you still have the responsibility to maintain the code and make sure that this will work with the latest updates of the theme.

Meanwhile, perhaps these old threads may help you:

Best Regards.

#3

Thank you, I understand.

This was a 2-part question and the first part I’m still unclear on. I see header-settings to make the header transparent, however, with no content behind it, it simply becomes white. How can I get the content up and behind the header; by applying a negative margin to the first section?

#4

Hey @mcaravaglia,

“I see header-settings to make the header transparent, however, with no content behind it, it simply becomes white. How can I get the content up and behind the header; by applying a negative margin to the first section?”

Hope this helps.

#5

Thank you Ruenel

#6

You’re welcome.

#7

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