Creating Fixed Header + Adding A Drop Shadow with CSS

Today’s quick CSS tutorial will help you create a fixed header - meaning your main navigation will stay at the top of the page no matter how far down someone scrolls on your site. I also included the code for adding a drop shadow to it, giving a bit of a 3D effect to your site so that your header stands out from your on page content. Both edits are quick copy and paste CSS tricks, codes below! Enjoy :)

 
 

End credit background music provided by https://bensound.com

The following works well on all Brine templates

header {

position: fixed;

z-index: 9999;

width: 100%;

-webkit-box-shadow: 0px 3px 15px rgba(100, 100, 100, 0.49);

-moz-box-shadow: 0px 3px 15px rgba(100, 100, 100, 0.49);

box-shadow: 0px 3px 15px rgba(100, 100, 100, 0.49);

}

The following works well on all Bedford templates

#header {

position: fixed;

z-index: 9999;

width: 100%;

-webkit-box-shadow: 0px 3px 15px rgba(100, 100, 100, 0.49);

-moz-box-shadow: 0px 3px 15px rgba(100, 100, 100, 0.49);

box-shadow: 0px 3px 15px rgba(100, 100, 100, 0.49);

}


I am working on a BUNCH of CSS tutorials to help you get over any hesitation you might have about custom code on your Squarespace site. My goal is to upload a new one every week, but the more people on my mailing list the more likely I am to actually do it! If you want to be notified of my next video, or request one - awesome! Sign up below: