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

Sticky Header - Background Colour

Recommended Posts

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

Edited by buzzoh
adding tags

Share this post


Link to post

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.

Share this post


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...