JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<title>Шаблон 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
	
	<div class="container-fluid">
		<div id="fix-menu">
			<div class="logo"><p><b>INFUSION</b></p><div class="hamburger-menu"></div></div>
			
			<ul>
				<li><a href="#"><b>Design folio</b></a></li>
				<li><a href="#"><b>services</b></a></li>
				<li><a href="#"><b>our business</b></a></li>
				<li><a href="#"><b>how we help</b></a></li>
				<li><a href="#"><b>take the tour</b></a></li>
				<li><a href="#"><b>contact</b></a></li>
			</ul>
			<div class="mobile-menu">
				
			</div>
		</div>
		<div class="banner"><img src="image/blog-1.png" alt="">
			
		</div>
	
	</div>
<script type="text/Javascript" src="js/main.js"></script>
</body>
</html>

CSS

* {
  padding: 0;
  margin: 0;
}


.container-fluid {
  width: 100%;
  height: 100%;
}

.banner img {
  width: 100%;
  height: 100%;
}
#fix-menu {
  position: fixed;
  width: 100%;
  height: 71px;
  background: white;
}
.logo {
  display: inline-block;
  float: left;
  width: 22.3%;
  height: 71px;
  background:#63C6AE; 
}

.logo p {
  float: right;
  padding: 23px 34px 0 0;
  color:white;
  font:25px bold "SINTONY" sans-serif;
}

ul {
  list-style-type: none;
}

#fix-menu li a {
  display: inline;
  float: left;
  padding:29px 36px;
  text-decoration: none;
  text-transform: uppercase;
  color:#586165;
  font:14px bold "SINTONY" sans-serif;
}
#fix-menu li a:hover {
  color:#63C6AE;
}

.mobile-menu {
  display: inline-block;
  float: right;
}

.hamburger-menu {
  visibility: hidden;
  width:25px;
  height:4px;
  border-radius:5px;
  background-color:white;
  position:relative;
  display: inline-block;
  top: 25px;
  cursor: pointer;
}

.hamburger-menu:after, .hamburger-menu:before {
  content: '';
  width: 100%;
  height:4px;
  background-color:white;
  position:absolute;
  border-radius:5px;
}

.hamburger-menu:after {
  top:10px;
}

.hamburger-menu:before {
  top:20px;
}





@media screen and (max-width: 1300px) {
 #fix-menu li a {
  padding: 29px 25px;
  font-size: 12px;
 }
 
}
@media screen and (max-width: 1050px) {
 #fix-menu li a {
  padding: 29px 10px;
  font-size: 12px;
 }
 
}
@media screen and (max-width: 850px) {
 ul {
  display: none;
 }
 .logo {
  width: 100%;
 }
 .logo p {
  float: left;
  padding-left: 70px;
  letter-spacing: 0.8em;
  padding-right: 2%;
 }
 .hamburger-menu {
  visibility: visible;
  
 }
 
}

@media screen and (max-width: 400px) {

 #fix-menu {
    height: auto;
 }

 #fix-menu ul {
    display:none;
    height: auto;
    width: 100%;
 }
 #fix-menu li {
  width: 50%;
  float: left;
  position: relative;
 }
 #fix-menu a {
  width: 100%;
  float: left;
  text-indent: 25px;
 }

 .logo {
  width: 100%;
 }
 .logo p {
  padding-right: 17%;
...

JavaScript

$(document).ready(function() {
	var header_width = $('.logo').width();
    elementOut(header_width);
});
function elementOut(header_width) {
    if (header_width < 850) {
        $('.hamburger-menu').click(function() {
            $('#fix-menu ul').css('display','block');
        });
    }
    else {
        alert(header_width);
    }
}