JSFiddle - React, Tailwind, and code Playground

by Matt Hopkins

HTML

<div class="de elNavWrapper de-nav elAlign_center elMargin0 ui-droppable de-editable" id="tmp_nav-38634" data-de-type="nav" data-de-editing="false" data-title="navigation" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" style="margin-top: 20px; outline: none; cursor: pointer;"
  aria-disabled="false">
  <nav class="nodoNav elLinks3 elLinkSize1 slide elLinkNormal">
    <ul>
      <li class="nav1 nodoNavItem"><a href="/" class="nav1link nodoNavLink" target="_parent" style="font-size: 22px;">Home</a></li>
      <li class="nav2 nodoNavItem"><a href="/before-after" class="nav2link nodoNavLink" target="_parent" style="font-size: 22px;">Before / After Gallery</a></li>
      <li class="nav3 nodoNavItem"><a href="/shop-dualpolymer" class="nav3link nodoNavLink" target="_parent" style="font-size: 22px;">Shop</a></li>
      <li class="nav4 nodoNavItem"><a href="#" class="nav4link nodoNavLink" target="_parent" style="font-size: 22px;">About Us</a></li>
      <li class="nav5 nodoNavItem"><a href="#" class="nav5link nodoNavLink" target="_parent" style="font-size: 22px;">Resources</a></li>
    </ul>
  </nav>
</div>

JavaScript

$(function() {

  function createMobileNav(navID) {
    var numberOfLinks = '';
    var navDiv = $('#' + navID);
    var navLinks = [];
    var mobileNavWrapper = $('<div class="TFTBmobileNav" id="' + navID + '-mobile" data-hide-on="mobile"/>');
    var mobileNav = $('<select style="display: block; margin: 0 auto;"/>')

    var classList = $('#' + navID + ' nav').attr('class').split(/\s+/);
    $.each(classList, function(index, item) {
      if (item.indexOf('elLinks') !== -1) {
        numberOfLinks = item[item.length -1];
      }
    });

    for (i = 0; i < numberOfLinks; i++) {
      navLinks.push($('#' + navID + ' nav ul li a').get(i));
    }

    $(mobileNav).append('<option value="#">☰ Menu</option>')

    for (x = 0; x < navLinks.length; x++) {
      $(mobileNav).append('<option value="' + navLinks[x].href + '">' + navLinks[x].text + '</option>')
    }

    $(document).on('change', '.TFTBmobileNav select', function() {
      window.location = this.value;
    });

    $(mobileNavWrapper).append(mobileNav);
    $('#' + navID).after(mobileNavWrapper);
    $('#' + navID).attr('data-hide-on', 'desktop');
  }

  createMobileNav('tmp_nav-38634');
});