How to add a shadow under a navbar using CSS?

Question

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's web to my pre-existing navbar. I'm including the HTML & CSS of it in this codepen

score 22 · Accepted Answer · answered Mar 14 '20 at 07:44

22

Add a box-shadow to your nav bar. not to site-header.

nav {
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
}

answered Mar 14 '20 at 07:44

Kasun Gunawardana

316
2
6

Tnx ! Can you explain what each element of that code does, technically ? – CodingNoob Mar 14 '20 at 07:52

score 1 · Answer 2 · edited Oct 31 '22 at 07:45

1

Just update your CSS file from this:

.site-header {
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
}

to 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);
}

edited Oct 31 '22 at 07:45

Jarmos

336
1
8
22

answered Mar 14 '20 at 07:37

Tony Nagendra Kumar

93
10

I just tried adding that code at the very end of the CSS file, and it unfortunately did not work :( . – CodingNoob Mar 14 '20 at 07:40

How to add a shadow under a navbar using CSS?

2 Answers2