JSFiddle - React, Tailwind, and code Playground

BS NAV Trans

by Andrew Pougher

HTML

<nav class="navbar navbar-fixed-top">

  <section class="container">

    <nav class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarAP" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </nav>

    <nav id="navbarAP" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="/#home">
            <span class="fa fa-home" style="font-size: 30px; line-height: 31px; padding-top: 5px; padding-bottom: 5px;"></span>
          </a>
        </li>
        <li>
          <a href="/#folio">
         Work
            <br>
            <small style="font-size: 0.8em;">&nbsp;</small>
          </a>
        </li>
        <li>
          <a href="/#bio">
          Bio
            <br />
            <small style="font-size: 0.8em;">&nbsp;</small>
          </a>
        </li>
        <li>
          <a href="/#about-me">Contact<br />
                            <small>&nbsp;</small>
                        </a>
        </li>

        <li>
          <a href="/#books">Locations<br />
                            <small>&nbsp;</small>
                        </a>
        </li>
        <li class="dropdown active">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Availability <span class="caret"></span>
                            <br>
                            <small>&nbsp;</small>
                        </a>
          <ul class="dropdown-menu">
            <li class='active booked'><a>Booked until May</a></li>
            <li><a href="/#booking">Enquiry Form</a></li>
          </ul>
        </li>
      </ul>
    </nav>

  </section>

</nav>

CSS

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
    @import url(https://fonts.googleapis.com/css?family=Roboto:100,200,300,400|Domine:400|Montserrat:700);
body {
    font-family: Montserrat, Arial, sans-serif;
  background-image: url("http://placekitten.com/1200/1300");
  background-size: cover;
  background-repeat:no-repeat
}

.navbar {
  background: rgba(0, 0, 0, 0.3);
}

.navbar-nav > li > a {
            -webkit-transition: all ease .6s;
       -moz-transition: all ease .6s;
         -o-transition: all ease .6s;
            transition: all ease .6s;
  color: #fff;
}



@media (max-width: 767px) {
  .navbar-nav > li > a {
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
  }

  }
  @media (min-width: 768px) and (max-width: 991px) {
    .navbar-nav > li > a {
      font-size: 1em;  letter-spacing:1px
    }

    .jumbotron h1 {
      font-size: 50px;
    }
  }
  @media (min-width: 992px) and (max-width: 1199px) {
    .jumbotron h1 {
      font-size: 62px;
    }
  }
  .dropdown-menu {;
    border: none;
    background: rgba(0, 0, 0, 0.3);
  }
  .navbar-nav > li.active > a,
  .navbar-nav > li > a:hover,
  .navbar-nav > li > a:active,
  .navbar-nav > li > a:focus,
  .dropdown-menu > li.active > a,
  .dropdown-menu > li > a:hover,
  .dropdown-menu > li > a:active,
  .dropdown-menu > li > a:focus,
  .dropdown-menu > .active > a:hover,
  .dropdown-menu > .active > a:focus {
    background-image: none;
    background-color: rgba(240, 0, 130, 0.5);
    color: #000;
  }
  .dropdown-menu > li > a {
    color: #fff;
    background-color: none;
  }
  /* Toogle navigation */
  .navbar-header .navbar-toggle .icon-bar {
    background-color: #fff;
  }
  /* DROPDOWN on hover */
  .dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
  }
  .dropdown-menu li:hover .sub-menu {
    visibility: visible;
  }
  .dropdown:hover .dropdown-menu {
    display: block;
  }
 ...