Bootstrap Navbar Shadow Won't Cast on a Column

I’m trying to get my navbar to cast its shadow over the column just below it, but I can’t seem to figure it out. I’ve used different methods of casting a shadow and searched all sorts of stuff online, but nothing seems to help.

Hi Duan,
Set the entire navbar with a div like this:
div class="example z-depth-5"
and end the div above the end nav bar and the shadow effect should work. I tried it on codepen and it worked with these changes, just not sure how much shadow you want. I hope this helps : )

1 Like

I don’t think I’m following your instructions correctly, sorry!

Do you mean I should wrap the entire navbar in the div?

Like:

div class="z-depth5"
nav
Navbar Stuff
/nav
/div

Nevermind, I think what I was using is breaking bootstrap. I’ll find something else to do shadows.

Hi,
Sorry just getting back now. Are you sure because I just tested it again and it does work. set it up with the div closed before the nav close like this:
div class="z-depth-5"
nav
Navbar Stuff
/div
/nav

I think that you had the div set without the (-) in between depth and 5. It’s a cool effect that I didn’t know about.
( I forgot to mention the 5 is how much shadow, so lower the number less of shadow and I think the max is 5, but I’m not certain)I hope this helps, It works in your codepen after running it. Good luck : )

Yeah I’ve actually tried multiple style frameworks, and basically all of them have the problem of not casting over the column. Must just be some weird thing I’m doing wrong.

I’m just gonna try to do this manually with CSS!

Thanks!