Jump to content

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

Recommended Posts

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

Link to comment
  • Replies 9
  • Created
  • Last Reply

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 comment

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 comment
  • 3 weeks later...

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 ?



Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.