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(){
/*var a = $(".bottom-head li").css('display','none')
var b = $(".bottom-head li").css('display','none')
if (a = b) {
$(".top-head .hamburger-menu").on('click', function() {
$(".bottom-head li").css('display','block');
b = $(".bottom-head li").css('display','block');
});
}
if (a != b) {
$(".top-head .hamburger-menu").on('click', function() {
$(".bottom-head li").css('display','none');
});
}*/
$(".hamburger-menu").click(function(){ //Событие клик по кнопочке
$(".bottom-head").slideToggle("slow");
});
});