JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-2">
                <a href="/"><img class="logo" src="/wp-content/themes/av/images/logo.png" /></a>
            </div>
            
            <div class="col-xs-10">
                <nav>
                    <a id="nav-toggle" href="#"><span></span></a>
                    <div class="menu">
                        <ul id="menu-primary" class="menu nav navbar-nav">
                            <li class="menu-item-35">
                                <a href="/">Home</a>
                            </li>
                            <li class="menu-item-has-children">
                                <a href="#">Services</a>
                                <ul class="sub-menu">
                                    <li class="current-menu-item page_item page-item-12 current_page_item menu-item-39">
                                        <a href="/services/search-engine-marketing/">Search Engine Marketing</a>
                                    </li>
                                    <li class="menu-item-38">
                                        <a href="/services/display-remarketing/">Display &#038; Remarketing</a>
                                    </li>
                                    <li class="menu-item-32">
                                        <a href="/content-marketing/">Content Marketing</a>
                                    </li>
                                    <li class="menu-item-33">
                                        <a href="/conversion-rate-optimisation/">Conversion Rate Optimisation</a>
                                    </li>
                                    <li class="menu-item-34">
                                        <a href="/facebook-advertising/">Facebook Advertising</a>
                                    </li>
                                </ul>
                            </li>
                           ...

CSS

header { background: rgba(9, 10, 10, 0.9); color: white; position: fixed; z-index: 99; width: 100%; }
header .logo { padding: 8px 0; max-width: 175px; }
header .navbar-nav { float: right; margin-bottom: 0; }
header ul li { display: inline-block; list-style: none; background: none; padding: 0; }
header ul li a { color: white; padding: 20px; display: inline-block; font-size: 1.1em; -moz-transition: all 300ms; -o-transition: all 300ms; -webkit-transition: all 300ms; transition: all 300ms; }
header ul li a:hover { text-decoration: none; background: #f4792c; color: white; }
header ul .menu-item-has-children { position: relative; }
header ul .menu-item-has-children:after { content: "\25BE"; position: absolute; right: 12px; top: 21px; color: white; }
header ul .menu-item-has-children > a { padding-right: 30px; }
header ul ul.sub-menu { display: none; position: absolute; min-width: 300px; background: rgba(9, 10, 10, 0.9); -webkit-padding-start: 0px; padding-left: 0; }
header ul ul.sub-menu.open { display: block; }
header ul ul.sub-menu li { list-style: none; display: block; }
header ul ul.sub-menu li a { display: block; }
header .menu { display: block; }
@media (max-width: 991px) { header .menu { display: none; } }
header .menu.mobMenu { display: none; position: fixed; z-index: 999; background: rgba(9, 10, 10, 0.9); width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; text-align: center; padding-left: 0; padding-top: 15%; }
header .menu.mobMenu ul li { display: none; }
header .menu.mobMenu ul li a { text-transform: uppercase; font-weight: 700; font-size: 2em; padding: 15px; display: block; }
header .menu.mobMenu ul .menu-item-has-children:after { display: none; }
header .menu.mobMenu ul .sub-menu { display: block; position: static; }
header .menu.mobMenu ul .sub-menu li a { text-transform: inherit; font-size: 1.3em; font-weight: 300; padding: 5px; }

#nav-toggle { display: none; float: right; height: 35px; width: 35px; padding-top: 26px; position: relative;...

JavaScript

// Toggle dropdowns
$('.menu-item-has-children').click(function(e){
    if(this == e.target) e.stopPropagation()
    $(this).find('.sub-menu').toggleClass('open');
});



$('.menu').show().removeClass('mobMenu');
$('#nav-toggle').removeClass('active');
$('header nav').removeClass('nav-open');
$('.menu li').removeAttr( 'style' );