JSFiddle - React, Tailwind, and code Playground

bootstrap 2 level nav with logo

by Andrew Pougher

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<a class="navbar-logo" href="#"></a>

<nav class="navbar-inverse nav-upper">
  <div class="container-fluid">
    <ul class="nav navbar-upper">
      <li><a href="#">NAV-A-1</a>
      </li>
      <li><a href="#">NAV-A-2</a>
      </li>
    </ul>
  </div>
</nav>

<nav class="navbar navbar-inverse navbar-static-top navbar-lower">
  <div class="container-fluid">

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

    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li><a href="#">NAV-B-1</a>
        </li>
        <li><a href="#">NAV-B-2</a>
        </li>
        <li><a href="#">NAV-B-3</a>
        </li>
        <li><a href="#">NAV-B-4</a>
        </li>
      </ul>
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-default">Submit</button>
            </span>
          </div>
        </div>
      </form>
    </div>
  </div>
</nav>

CSS

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300");
body {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
 /*font-family: 'Open Sans', Arial, Helvetica, sans-serif;*/
}

a{       -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;}

.navbar-inverse.nav-upper {
  height: 60px;
  background-color: #ed2024;
}

.navbar-inverse.nav-upper ul {
  float: right;
  display: table;
  background-color: #ed2024;
}

.navbar-inverse.nav-upper .navbar-upper > li {
  display: table-cell;
  font-size: 14px;
}

.navbar-inverse.nav-upper .navbar-upper > li > a {
  color: #fff;
}

.navbar.navbar-lower {
  background-color: #d8d8d8;
  border: 0;

}

@media (min-width: 768px) {
  .navbar.navbar-lower .navbar-nav {
    margin-left: 20%;
    background-color: #d8d8d8;
        font-size:10px
  }
}

@media screen and (min-width:1024px) {
  .navbar.navbar-lower .navbar-nav {
    margin-left: 20%;
  font-size:20px;

  }

}

.navbar-logo {
  background-image: url('https://placehold.it/190x240/ececec/222222/&text=D');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  top: 5px;
  left: 15px;
box-shadow:1px 1px 2px rgba(0,0,0,0.3);
   display: table;
 
    top: -5px;
    left: 15px;
  z-index: 1051;
    width: 180px;
    height: 200px;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
}


 

.navbar-logo:hover {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
}
@media (max-width:1024px){
  .navbar-logo{  width: 100px;
    height: 120px;-webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;}
    
  }