buzzoh 0 Share Posted November 1, 2019 (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, 2019 by buzzoh adding tags Link to post
DaveKoDesign 0 Share Posted November 4, 2019 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. Link to post
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment