Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


jcbouden

Question

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

Edited by jcbouden
Link to post
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

9 answers to this question

Recommended Posts

  • 0

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:

 

Link to post
  • 0

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.

Link to post
  • 0

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 ? 🙂

Link to post
  • 0

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 ?

 

image.png

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...