CODEWITHSUNDEEP
htmlcssnavigationnaveffects
CodingNoob
CodingNoob

Reputation: 105

How to add a shadow under a navbar using CSS?

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

Upvotes: 9

Views: 63758

Answers (3)

Luke Graham
Luke Graham

Reputation: 159

In my case I needed

position: relative

on the navbar along with the box-shadow

Upvotes: 0

Tony Nagendra Kumar
Tony Nagendra Kumar

Reputation: 93

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

Upvotes: 1

Kasun Gunawardana
Kasun Gunawardana

Reputation: 346

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

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

Upvotes: 25

Related Questions