JSFiddle - React, Tailwind, and code Playground

by sheshu036

HTML

<script src="bootstrap.min.css "></script>
<script src="bootstrap.min.js"></script>
<nav class="navbar navbar-inverse affix" role="navigation">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
         data-target="#example-navbar-collapse" id="btn">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">NEWS</a>
   </div>
   <div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav" id="men">
         <li class="active"><a href="#">Parent 1</a></li>
           <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Parent 2 <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="'">Child</a></li>
                             <li><a href="'">Child</a></li>
                             <li><a href="'">Child</a></li>
                                                         <li><a href="'">Child</a></li>
                             <li><a href="'">Child</a></li>
                             <li><a href="'">Child</a></li>
                                                         <li><a href="'">Child</a></li>
                             <li><a href="'">Child</a></li>
                             <li><a href="'">Child</a></li>
             
           </ul>
         </li>
       
       <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Parent 2 <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="'">Child</a></li>
                             <li><a href="'">Child</a></li>
                             <li><a href="'">Child</a></li>
                <li><a...

CSS

.affix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index:5;
}



@media screen and (max-width : 760px){ 
#men{
    float:left;
width:100%;
overflow-y: auto;
height: 100px;
}
}

JavaScript

$('#nav').affix({
		 
	});