JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<nav class="navbar navbar-default" role="navigation">
      <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
          <a rel="nofollow" href="#"><button type="button" class="btn btn-default pull-right hidden-md hidden-lg" style="margin-top:8px; margin-right:5px"><span class="glyphicon glyphicon-shopping-cart"></span></button></a>
          <a href="/"><div class="logoResize pull-left hidden-md hidden-lg">Logo</div></a>
          
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <div class="searchBar hidden-md hidden-lg">
              <form role="search" action="search.aspx">
                  <div class="input-group">
                      <input type="text" placeholder="Search for Keyword, Brand, or Item #" name="ss" class="form-control inputSearchBar" />
                      <div class="input-group-btn">
                        <button class="btn btn-default" value="Search" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                      </div>
                  </div>
              </form>
          </div> 

          <ul class="nav navbar-nav">
              

              <li class="myDropdown dropdown navbar-custom first-navbar-custom">
                <a href="#" data-toggle="dropdown" class="dropdown-toggle shortNav hidden-md hidden-lg pull-left cheveron-dropdown"><span class="chevron_toggleable glyphicon glyphicon-plus hidden-md hidden-lg"></span></a>
                <a...

CSS

.searchBar{
        margin-top:15px;
        margin-bottom:15px;
    }

    .logoResize{
        margin: 10px 10px 5px 10px;
        background-color:white;
        width:150px;
        height:30px;
    }

    .first-navbar-custom{
        border-top: 1px solid #CFCFCF;
    }

    .shortNav{
        padding:0px !important;
    }

    .chevron_toggleable{
        padding: 12px 0px 0px 22px;
        width: 60px;
        height: 40px;
    }


    @media (max-width: 991px) {

        .navbar-header {
            float: none;
        }
        .navbar-left,.navbar-right {
            float: none !important;
        }
        .navbar-toggle {
            display: block;
        }
        .navbar-collapse {
            border-top: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        }
        .navbar-fixed-top {
            top: 0;
            border-width: 0 0 1px;
        }
        .navbar-collapse.collapse {
            display: none!important;
        }
        .navbar-nav {
            float: none!important;
            margin: 0px -15px !important;
        }
        .navbar-nav>li {
            float: none;
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .collapse.in{
            display:block !important;
        }
        .navbar-collapse.in {
            overflow-y: auto !important;
        }
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu>li>a, .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
            color: #999;
        }
        .navbar-inverse .navbar-nav .open...

JavaScript

$(document).ready(function() {
        function checkWidth() {
            var windowSize = $(window).width();
            if (windowSize > 991) {
                $('.dropdown-toggle').removeClass('enabled').addClass('disabled');
            } else if (windowSize <= 991) {
                $('.dropdown-toggle').removeClass('disabled').addClass('enabled');
            } 
        }
        // Execute on load
        checkWidth();
        // Bind event listener
        $(window).resize(checkWidth);
    });



  $(document).ready(function() {
    
    $('.myDropdown').on('show.bs.dropdown', function () {
        $(this).find('.chevron_toggleable')
        .removeClass("glyphicon-plus")
        .addClass("glyphicon-minus");
    })

    $('.myDropdown').on('hide.bs.dropdown', function () {
      $(this).find('.chevron_toggleable')
      .removeClass("glyphicon-minus")
      .addClass("glyphicon-plus");
    })

  });