buzzoh 0 Posted November 1 (edited) 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 November 1 by buzzoh adding tags Share this post Link to post
DaveKoDesign 0 Posted November 4 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