Bootstrap 4 Navbar

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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>
</nav>
<! -- End Navbar -->

CSS

body { background-color: skyBlue; min-height:200vh;}
@media (max-width: 900px) { body {background-color: yellow;} }

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

/* Navbar Collapse Styles To Stack Items At Mobile Widths*/
@media(max-width:900px) {
  .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-toggler {display: block !important;}
  .navbar-toggleable-sm.collapse {display:none !important}
  .navbar-toggleable-sm.collapse.in {display:block !important}
}