JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="css/bootstrap.css" rel="stylesheet">
	<link rel="stylesheet" href="css/style.css">
	<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
	<script src="js/main.js"></script>
</head>
<body>
	<div class="wrap">
		<header>
			<div class="top-head">
				<div class="container">
					<h1>
						<a href="#">
							<img src="img/logo.png" alt="">
						</a>
					</h1>
					<p class="addres">ул. Шопокова 79, 2- этаж, 25 кабинет</p>
					<div class="contact">
						<p>Телефон/факс: +996 (312) 48-22-48</p>
						<p>Телефон: +996 (312) 93-55-93</p>
					</div>
					<div class="feedback">
						<p>
							<button type="sumbit">Обратная связи</button>
						</p>
					</div>
					<div class="hamburger-menu">
						<div class="menu-line"></div>
						<div class="menu-line"></div>
						<div class="menu-line"></div>
					</div>
				</div>
			</div>
			<div class="bottom-head">
				<div class="container">
					<nav>
						<ul>
							<li><a href="#">O TRIMBOX</a></li>
							<li><a href="#">Доставка и оплата</a></li>
							<li><a href="#">Гарантия</a></li>
							<li><a href="#">Преимущества</a></li>
							<li><a href="#">Отзывы</a></li>
							<li><a href="#">Контакты</a></li>
						</ul>
					</nav>
				</div>
			</div>
		</header>
       </div>
    </body>
 </html>

CSS

body p {
	font-family: PT sans, sans-serif;
	margin: 0;
}
.pd-0 {
	padding: 0;
}
	/*** header ***/
		/*** top-head***/
			.top-head {
				background: #0B2332;
				padding: 16px 0 27px 0;
			}
				.top-head h1 {
					width: 149px;
					float: left;
					padding: 0;
					margin: 0;
				}
				.top-head p.addres {
					float: left;
					margin-left: 95px;
					font-size:15px;
					color: white;
				}
				.top-head .contact {
					float: left;
					display: inline-block;
					margin-left: 95px;
					font-size:15px;
					color: white;
				}
				.top-head .contact p {
					margin: 0;
				}
				.feedback {
					margin-left: 95px;
					display: inline-block;
				}
				.top-head button {
					margin-top:5px;
					background: #143345;
					display: inline-block;
					float: left;
					color:white;
					border-color: #143345;
					height: 36px;
					padding: 0px 30px 4px 30px;
				}
				.top-head button:focus {
					border-color: #143345;
				}
				.top-head button:after {
					border-color: #143345;
				}
				.hamburger-menu {
					cursor: pointer;
					display: none;
					margin-left: 30px;
					padding: 10px;
				}
				.hamburger-menu:hover .menu-line {
					background: #0074B7;
				}
				.menu-line {
					transition:0.4s;
					display: none;
					width:20px;
					height: 3px;
					background: white;
					margin: 3px auto;
				}
					@media screen and (max-width: 1200px) {
						.feedback {
							margin-left: 20px;
						}	
						.top-head p.addres {
							margin-left: 20px;	
						}
						.top-head .contact {
							margin-left: 20px;
						}
					}
					@media screen and (max-width: 1000px) {
						.top-head h1 {
							width: 100%;
							text-align: center;
							padding: 0;
							margin: 0;
						}
						.feedback {
							width: 100%;
							text-align: center;
						}	
						.feedback p {
							text-align: center;
						}
						.top-head p.addres {
							text-align: center;
							display: inline-block;
							width: 100%;
							float: right;
	 ...

JavaScript

$(document).ready(function(){    
    $(".bottom-head li").css('display','none');
    
  $(".top-head .hamburger-menu").on('click', function() {
        
        if ($(".bottom-head li").css('display') == 'block') {
            
            $(".bottom-head li").slideToggle();
        }
        else {
            $(".bottom-head li").slideToggle();
        }
  });
});