JSFiddle - React, Tailwind, and code Playground

by Guruprasad Rao

HTML

<nav class="navbar navbar-default md-nav" role="navigation">
     <div class="container-fluid">
        <select class="nav-sel">
            <option value="Vous Etes">Vous Etes</option>
            <option value="Vous Etes">Vous Etes</option>
            <option value="Vous Etes">Vous Etes</option>
            <option value="Vous Etes">Vous Etes</option>
        </select>

        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav nav nav-tabs">
                <li class="dropdown"><a href="#">Ministére</a>
                    <div class="dropdown-menu">
                        <ul>
                            <li><a href="#">Promotion</a></li>
                            <li><a href="#">Prévention</a></li>
                            <li><a href="#">Les Féderations</a></li>
                            <li><a href="#">Le diréct</a></li>
                            <li><a href="#">Emplois & Mériers</a></li>
                            <li><a href="#">Grand Evénements</a></li>
                        </ul>
                        <img src="img/athlete-img1.jpg" alt="athlete running" />
                    </div>
                </li>
                <li class="dropdown"><a href="#">Sport</a>
                    <div class="dropdown-menu">
                        <ul>
                            <li><a href="#">Promotion</a></li>
                            <li><a href="#">Prévention</a></li>
 ...

JavaScript

$(document).ready(function(){
   
  if ($(window).width() < 979) {
     
        $('li.dropdown>a').addClass('dropdown-toggle');
        $('li.dropdown>a').attr('data-toggle','dropdown');
    } else {
        $('li.dropdown > a').removeClass('dropdown-toggle');
         
    }   
});