Jump to content

Sticky Header - Background Colour

Recommended Posts


Currently I have the following code in custom css for a sticky header: 

#header {
    background-color: #000000 !important;
    position: -webkit-sticky !important;
    position: fixed!important;

I need a colour underneath the nav bar so it will stand out against the information on the page, the code is doing so. However, I would like this shape to span the entire page as currently it's only covering the header. Also I would like for the edges of that shape to be blurred so it won't be a harsh line across my page. I'll link to my website 🙂



Link to comment
  • Replies 1
  • Created
  • Last Reply

Hi Gerry,

You could add the following to your #header CSS

width: 100%;
margin-top: -60px;
padding-top: 30px;
-webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
-moz-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
box-shadow: 0 10px 10px -1px rgba(0, 0, 0, 0.64);

The margin and padding are to move the heading to the top of the site and the box shadow applies a shadow to blur or soften the bottom of the header.

Let me know if that works for you!


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.