JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div>
	<img  class="banner-desktop"src="http://andeb-autos.com/images/headerbanner/header_1f57e53c17d6aa88f2ee559653de6b48.png?14308373985548d8964293b" alt="Andeb Autos Ltd Nielsen Chemicals Automotive cleaning products">
        	
<div class="menu_bar">
	<a href="#" class="bt-menu"><span class="icon-menu"></span>Menu</a>
</div>
        </div><div>
	<header>
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li class="submenu" >
					<a href="#">Nielsen Products<span class="icon-arrow-down2"></span><span class="caret"></span></a>
					<ul class="children">
						<li><a href="#">Exterior Cleaning<span class="icon-dot-single"></span></a></li>
						<li><a href="#">Interior Cleaning<span class="icon-dot-single"></span></a></li>
						<li><a href="#">Odour Control & Air Fresheners<span class="icon-dot-single"></span></a></li>
						<li><a href="#">Exterior Finishes<span class="icon-dot-single"></span></a></li>
						<li><a href="#">Dressings<span class="icon-dot-single"></span></a></li>
						<li><a href="#">Glass Cleaning<span class="icon-dot-single"></span></a></li>
						<li><a href="#">Workshop Maintenance<span class="icon-dot-single"></span></a></li>
						<li><a href="#">Janitorial<span class="icon-dot-single"></span></a></li>
						<li><a href="#">TDS & SDS INFO<span class="icon-dot-single"></span></a></li>
					</ul>
				</li>
				<li><a href="#">Nielsen Catalogue</a></li>
				<li class="submenu1">
					<a href="#">Equipment/Tools/Consumables<span class="icon-arrow-down2"></span><span class="caret"></span></a>
					<ul class="children1">
						<li><a href="#">Valeting, Brushes and Equipment<span class="icon-dot-single"></span></a></li>
						<li><a href="#">Tools & Equipment<span class="icon-dot-single"></span></a></li>
						<li><a href="#">Workshop Consumables<span class="icon-dot-single"></span></a></li>
						<li><a href="#">AdBlue<span class="icon-dot-single"></span></a></li>
					</ul>
				</li>	
				<li><a href="#">Contact...

CSS

.bt-menu {
		position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.menu_bar {
		display: block;
		width: 100%;
		height: 10%;
		padding-top: 35px;
		position: relative;
		background: #FF0000;
		z-index: 999;
		font-size: 15px;
		margin: 0;
	}
	.menu_bar .bt-menu {
		display: block;
		color: #FFF;
		padding-left: 25px;
		padding-right: 25px;
		overflow: hidden;
		font-size: 25px;
		font-weight: bold;
		text-decoration: none;
	}
	.menu_bar span {
		float: right;
		font-size: 20px;
	}
	header nav {
		width: 80%;
		height: 100%;
		top: 0;
		margin: 0;
		overflow-y: hidden;
		z-index:9999;
	}

JavaScript

$(document).ready(function() {

    $(window).resize(function() {
        // This will fire each time the window is resized:
        if($(window).width() >= 1024) {
            // if larger or equal
            $('nav').show();
        } else {
            // if smaller
            $('nav').hide();
        }
    }).resize(); // This will simulate a resize to trigger the initial run.
});

$(document).ready(function(){

$(".bt-menu").click(function(){  $("nav").slideToggle(); });
 });

$(document).ready(function() {
 $(".submenu").click(function(){  $(".children").slideToggle(); });
  });

$(document).ready(function() {
 $(".submenu1").click(function(){  $(".children1").slideToggle(); });
  });