Having a fix navigation bar transparent at the top, then black

Site URL: http://jcbouden.com

Hey guys,

I am new to squarespace and trying to find how to make it work. This might not be my last question 🙂

As a director, I want to make a landing page with a big video header so people have instantly an idea of my work.

I also want to create a scroll down site, so I would like to have a fixed navigation bar at the top.

The idea would be that this bar would be transparent at the top, so it won't hide the video, but then become black as soon as the viewers has left the video by scrolling down. An exemple here : http://www.shainblumphoto.com/

For now, I only entered 

header#header { position: fixed !important;}

I am on 7.0 with hayden template.

If someone has an answer it would be awesome !

Thanks guys

First part, if your video doesn't have audio, choose the landing page "Cover". Put it in the unlinked section of your site, add a video and make it your home page. The video will play full screen with links to the rest of your site. This I think would be more effective than just a banner video. No reason you can't have both actually.  As far as having a fixed header look at this:

Thank you for the answer. But because I can't put a cover in an index, people wont be able to scroll down to the rest of the website. I don't want them to have to click to go anywhere, I prefer them to scroll.

To add additionnal informations : 

Looks like the navigation bar is like I want when I scroll down after the home page.

Meaning that the bar is transparent on the video, transparent on my first page (which is the home page, to which the header is attached), and then when I scroll down to the next page the bar becomes black with a bit of transparency.
So the goal would be to have this bar directly after the video on my first page.

anyone ? 🙂

Hi. Your site is private. Can you setup password & share url? We can help easier

password : helpme

http://jcbouden.com

Thank you 🙂

16 hours ago, jcbouden said:

password : helpme

http://jcbouden.com

 

Thank you 🙂

Do you use Personal Plan or higher?

Only Personal.

Try add this to Design > Custom CSS

div#showOnScrollWrapper.show ~ div header#header {
    background: black !important;
}

Hey there,

Thank you very much for your help.
For now the problem is the same, in the home page to which the header is attached there is no black background. Only when I scroll down to "Work". What I want is the black background to appear directly when the navigation bar is on the white background of the website.

Did I do something wrong ?