Добавьте тень в верхнюю фиксированную навигационную панель, используя Bootstrap

Я пытаюсь добавить тень в свою навигационную панель, которую у меня есть через Bootstrap, но я не могу понять, как это сделать. Может быть, кто-то может указать мне в правильном направлении. Все другие вопросы, которые я видел, которые были заданы по поводу подобной темы, имеют невероятно длительные ответы на беспорядочный код, но должен быть простой способ сделать это, не все дело в Bootstrap.

Здесь мой HTML, относящийся к моему 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 -->

И вот мой CSS, относящийся к 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;
}

Я знаю, что с текущими размерами пикселей, которые я установил для своей тени, он будет выглядеть как сплошной блок. Я планирую настроить, как только я смогу заставить эту вещь работать. Спасибо за любую помощь или указатели.

Любовь Мучо.

Ответы

Ответ 1

В вашем css добавьте следующее в правило класса .navbar class

.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 */
}

ИЗМЕНИТЬ

Существует потрясающий онлайн-инструмент для создания кода теневого кода (спасибо людям в cssmatic.com). Вы можете настроить внешний вид своей тени, и она будет генерировать весь необходимый код плюс любые конкретные префиксы браузера (webkit, mozilla и т.д.). Затем вы можете скопировать код в свой css.

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

Вы также можете найти другие эффекты css на одном сайте.

Ответ 2

Разметка вашего навигатора немного отличается от разметки Navbar по умолчанию, например,

Вы завернули весь свой навигатор в классе с именем navbar-inner вместо того, чтобы обернуть переключатель и бренд внутри класса navbar-header, а затем сбрасываемые элементы меню после.

Вот как выглядит ваша надбавка:

<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>

Здесь jsfiddle с приведенными выше кодами: https://jsfiddle.net/AndrewL32/e0d8my79/36/

Кроме того,

сохраните свой css файл ниже вашего загрузочного файла css, чтобы ваши стили не были перезаписаны стилем установки bootstrap по умолчанию.

<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-->