Add a drop shadow to a top-fixed nav bar using Bootstrap

Question

I'm attempting to add a drop shadow to my nav bar I have through Bootstrap, but I can't seem to figure it out. Maybe somebody can point me in the correct direction. All the other questions I've seen that have been asked about a similar topic have incredibly lengthy responses of messy code, but there has to be a simple way to do it, isn't that the whole point of Bootstrap after all.

Here's my HTML relating to my nav:

<div class="navbar navbar-inverse navbar-fixed-top" id="custom-nav">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="index.html">eService</a>
      <div class="nav-collapse">
        <ul class="nav pull-right">
          <li><a href="index.html">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="contact.html">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Services
                  <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Stage Design & Build</a></li>
              <li><a href="#">Event Planning & Management</a></li>
              <li><a href="#">Video Production</a></li>
              <li><a href="#">Audio Production</a></li>
              <li><a href="#">Lighting Production</a></li>
            </ul>
          </li><!-- dropdown -->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Events
                  <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Corporate Events</a></li>
              <li><a href="#">Civic Events</a></li>
              <li><a href="#">Charity Events</a></li>
              <li><a href="#">Grand Openings</a></li>
              <li><a href="#">Concerts</a></li>
            </ul>
          </li><!-- dropdown -->
        </ul><!-- /.nav -->
      </div><!--/.nav-collapse -->
    </div><!-- /.container -->
  </div><!-- /.navbar-inner -->
</div><!-- /.navbar -->

And here's my CSS relating to the navbar:

#custom-nav {
    -webkit-box-shadow: 20px 20px 20px #FC0;
    -moz-box-shadow:    20px 20px 20px #FC0;
    box-shadow:         20px 20px 20px #FC0;
    z-index:999;
}

I'm aware that with the current px dimensions I have set for my shadow it will appear like a solid block. I plan on adjusting once I can get this dang thing to work. Thanks for any help or pointers.

Mucho love.

Answer 1

In your css add the following to your .navbar class rule

.navbar {
    -webkit-box-shadow: 0 8px 6px -6px #999;
    -moz-box-shadow: 0 8px 6px -6px #999;
    box-shadow: 0 8px 6px -6px #999;

    /* the rest of your styling */
}

EDIT

There is an awesome online tool to generate box shadow code (thanks to the folks at cssmatic.com). You can adjust the way your shadow looks and it will generate all the code needed plus any specific browser prefixes (webkit, mozilla, etc.). You then can copy the code into your css.

http://www.cssmatic.com/box-shadow

You can also find other css effects in the same site.

Answer 2

To maintain shadow in your navbar simply adjust box-shadow properties

.navbar{
    box-shadow: 0px 8px 8px -6px rgba(0,0,0,.5);
    }

Here the first 0px is to make the shadow in center adjust it to get right and left-sided shadow

then, 8px is for height of the shadow

after that 8px and -6px is for hardness and opacity of the shadow

(0,0,0,0.5) is simple rgba(red,green,blue,alpha) colors and alpha, it is to maintain transparency of the shadow it goes 0.0(fully transparent) to 1.0(fully opaque)

Answer 3

Your navbar markup is a bit different from the default Bootstrap navbar markup, for example,

You wrapped your whole navbar in a class named navbar-inner instead of wrapping the toggle and brand inside a navbar-header class followed by the collapsible menu-items after.

Here's how your mark-up should look like:

<div class="navbar navbar-inverse navbar-fixed-top" id="custom-nav" role="navigation">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
         data-target="#example-navbar-collapse">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">eService</a>
   </div>
   <div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav">
         <li><a href="index.html">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="contact.html">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Services
                  <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Stage Design & Build</a></li>
              <li><a href="#">Event Planning & Management</a></li>
              <li><a href="#">Video Production</a></li>
              <li><a href="#">Audio Production</a></li>
              <li><a href="#">Lighting Production</a></li>
            </ul>
          </li><!-- dropdown -->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Events
                  <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Corporate Events</a></li>
              <li><a href="#">Civic Events</a></li>
              <li><a href="#">Charity Events</a></li>
              <li><a href="#">Grand Openings</a></li>
              <li><a href="#">Concerts</a></li>
            </ul>
          </li><!-- dropdown -->
        </ul><!-- /.nav -->
   </div>
</div>

Here's a jsfiddle with above codes: https://jsfiddle.net/AndrewL32/e0d8my79/36/

Also,

keep your custom css file below your bootstrap css file to avoid your styles being overwritten by bootstrap' default styling.

<link rel="stylesheet" type="text/css" href="bootstrap.css"> <!--call your bootstrap first-->
<link rel="stylesheet" type="text/css" href="mystyle.css"><!-- followed by your custom css after-->