Artemyi,
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
.topnav {
overflow: hidden;
float: right;
position: relative;
z-index: 80;
right: 50px;
top: 42px;
width: 40%;
background: none;
}
.topnav a, .topnav button.icon {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
background: gray;
}
.topnav a:hover {
color: black;
}
.active {
background-color: gray;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 2000px) {
.topnav {
display: block;
}
.topnav a {display: none;}
.topnav button.icon {
float: right;
display: block;
background: none;
color:#000;
}
.topnav button.icon:hover{
background: gray;
color:#fff;
}
.topnav span.nameMenu {
/*color: black;*/
font-size: 15px;
margin: 0px 7px 0 0;
}
.responsive span.nameMenu {
display:none;
}
}
@media screen and (max-width: 2000px) {
.topnav.responsive {position: absolute;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: center;
}
.responsive i.fa.fa-bars {
color: white;
}
.fa {
/*color:black;*/
}
}
@media screen and (max-width: 950px) {
.topnav {
position: absolute;
width: 71%;
right: 0;
top: 20px;
}
.topnav.responsive {position: absolute;}
}
@media screen and (max-width: 800px) {
.topnav span.nameMenu {display:none;}
.topnav.responsive a:first-child {
display: block;
}
}
</style>
<script>
document.addEventListener("click", function(event) {
var nav = document.querySelector(".topnav");
var icon = event.target.closest(".icon");
if (icon) {
event.preventDefault();
nav.classList.toggle("responsive");
}
if (event.target.closest(".topnav")) {
return;
}
if (nav.classList.contains("responsive")) {
nav.classList.remove("responsive");
}
});
</script>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="#">Ссылка 1</a>
<a href="#">Ссылка 2</a>
<a href="#">Ссылка 3</a>
<button class="icon" ><span class="nameMenu">МЕНЮ</span><i class="fa fa-bars"></i></button>
</div>
</body>
</html>
