Sticky Header - Background Colour

Hi, 

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 🙂
Thanks, 

Gerry.

https://www.forgetmenot-project.com/research

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!

Dave.