How to add a shadow under a navbar using CSS?
19,958
Solution 1
Add a box-shadow to your nav bar. not to site-header.
nav {
box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
}
Solution 2
just add this line in css file
.site-header { box-shadow: 0 2px 4px 0 rgba(0,0,0,.1); }
Change this
.site-header nav { box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);} or nav { box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);}
Related videos on Youtube
Author by
CodingNoob
Updated on June 04, 2022Comments
-
CodingNoob almost 2 years
I'm an absolute beginner when it comes to HTML & CSS, so I reckon that this might sound easy to some of you.
I was looking for a way to add a simple shadow to the navbar, like the one on codecademy.com/ to my pre-existing nav bar. I'm including the HTML & CSS of it in codepen below:
[https://www.codepen.io/CodingAddict/pen/QWbmBVQ][2]
-
CodingNoob about 4 yearsI just tried adding that code at the very end of the CSS file, and it unfortunately did not work :( .
-
CodingNoob about 4 yearsTnx ! Can you explain what each element of that code does, technically ?