JSFiddle - React, Tailwind, and code Playground

by mattography

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse no-border-radius no-border no-active-arrow no-open-arrow caret-left caret-bootstrap navbar-static-top" id="main_navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#MegaNavbarID" aria-expanded="true">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav navbar-left">
<li></li>
</ul>
<a href="javascript:void(0);" class="navbar-brand navbar-left toggle_fixing" style="padding-right: 0;"><i class="fa fa-chevron-down"></i></a>
<a class="navbar-brand navbar-left" href="index.html"><i class="fa fa-home"></i> <span class="reverse">MegaNavbar</span></a>
<ul class="nav navbar-nav no-margin navbar-left hidden-sm hidden-md hidden-lg">
<p class="navbar-text pull-left"><i class="fa fa-h-square"></i>&nbsp;<span class="hidden-sm hidden-md reverse">Text</span></p>
<a href="javascript:void(0);" class="navbar-link  pull-left"><i class="fa fa-link"></i>&nbsp;<span class="hidden-sm hidden-md reverse">Link</span></a>
</ul>
</div>
<div class="navbar-collapse collapse in" id="MegaNavbarID" aria-expanded="true">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown-full no-shadow no-border-radius" style="position: static;">
<a data-toggle="dropdown" aria-haspopup="true" href="javascript:void(0);" id="ddgalery" class="dropdown-toggle" aria-expanded="false"><i class="fa fa-file-image-o"></i>&nbsp;<span class="hidden-sm hidden-md reverse">Galery</span><span class="caret"></span></a>
<div class="dropdown-menu row" style="margin: 0px; top: 100%; bottom: auto; border-top-width: 0px; border-bottom-width: 1px; border-radius: 0px 0px 4px 4px;...

JavaScript

$( document ).ready(function() {
  $(document).on("click touchstart", function(e) {SetViewPort();});
  $(document).on("click touchstart", function(e) {
    if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
      //This will close all opened menus
      $('.navbar').find('.dropdown.open, .dropdown-wide.open, .dropdown-full.open, .dropdown-short.open, .dropdown-grid.open').each(function() {
        $(this).removeClass('open').children('.dropdown-toggle').attr('aria-expanded',false);
      })
      //This will close all opened submenus
      $('.navbar').find('.dropdown-menu.collapse.in').each(function() {
        $(this).removeClass('in').attr('aria-expanded',false).prev('.dropdown-toggle').addClass('collapsed').attr('aria-expanded',false);
      });
    }
  });
});