Bootstrap 4 Navbar

by wamosjk

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<! -- Navbar -->
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
  <button class="navbar-toggler pull-xs-right hidden-md-up" type="button" data-toggle="collapse" data-target="#navbar-collapse">&#9776;</button>
  <a class="navbar-brand" href="#">Responsive navbar</a>
  <div class="collapse navbar-toggleable-sm" id="navbar-collapse">
    <ul class="nav navbar-nav pull-xs-right">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
      <li class="nav-item btn-group">
        <a class="dropdown-toggle nav-link" type="button" id="navbar-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu  dropdown-menu-right" aria-labelledby="navbar-dropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
<! -- End Navbar -->

CSS

body { background-color: skyBlue; min-height:200vh;}/* MORE THAN 75 Xl */
@media (max-width: 74.9em) { body {background-color: pink;} }/* LESS THAN 75 Lg */
@media (max-width: 61.9em) { body {background-color: blue;} }/* LESS THAN 62 Md */
@media (max-width: 47.9em) { body {background-color: green;} }/* LESS THAN 48 Sm */
@media (max-width: 33.9em) { body {background-color: red;} }/* LESS THAN 34 Xs */

/* Navbar Styles */
.navbar{border-radius:0;}
.navbar-toggler{border:1px solid rgba(0,0,0,0.2);}
.navbar-toggler:hover{background:rgb(240,240,240)}
.navbar-toggler:focus{outline:0;}
.dropdown-toggle{cursor:pointer;}

/* Navbar Collapse Styles To Stack Items At Mobile Widths*/
@media(max-width:47.9em) {
  .navbar .collapse{max-height:250px;width:100%;overflow-y:auto;overflow-x:hidden;}
  .navbar .navbar-brand {float:none;display: inline-block;}
  .navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem;}
  .navbar .navbar-nav {float:none !important;}
  .nav-item{width:100%;text-align:left;}
  .navbar .collapse .dropdown-menu {
    position: relative;
    float: none;
    background:none;
    border:none;
  }
}