JSFiddle - React, Tailwind, and code Playground

by sol_b

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" id="hamburger">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#myPage">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">ABOUT</a></li>
        <li><a href="#services">SERVICES</a></li>
        <li><a href="#portfolio">PORTFOLIO</a></li>
        <li><a href="#pricing">PRICING</a></li>
        <li><a href="#contact">CONTACT</a></li>
      </ul>
    </div>
  </div>
</nav>

CSS

.navbar {
      margin-bottom: 0;
      background-color: #f4511e;
      z-index: 9999;
      border: 0;
      font-family: Montserrat, sans-serif;
      font-size: 12px !important;
      letter-spacing: 4px;
      border-radius: 0;
    }
    
    .navbar li a,
    .navbar .navbar-brand {
      color: #FFFFFF !important;
    }
    
    .navbar-nav li a:hover,
    .navbar-nav li.active a {
      color: #f4511e !important;
      background-color: #FFFFFF !important;
    }
    
    .navbar-default .navbar-toggle {
      border-color: transparent;
      color: #ffffff;
    }
    
    #hamburger .icon-bar {
      background: white;
    }
    
    #hamburger:hover,
    #hamburger.is-active {
      background: white !important;
    }
    
    #hamburger:hover .icon-bar,
    #hamburger.is-active .icon-bar {
      background: #F4511e !important;
    }
    
    #hamburger:focus {
      background: #F4511e;
    }
    
    #hamburger:focus .icon-bar {
      background: #FFF;
    }

JavaScript

$(function() {
  var hamburger = document.getElementById('hamburger');
  
  $(hamburger).click(function() {
    $(this).toggleClass('is-active');
  })
})