Сколько уже сижу, не могу понять в чём причина того, почему не работает код. Делаю по этому примеру ( https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav ), только через flexbox. Может в js ошибка. Почему-то, когда я нажимаю на тот значок, то стили, которые я задавал раньше, пропадают. Крч, кому не сложно, посмотрите пожалуйста.
function iconMenu() {
var x = document.getElementsByClassName('topnav')[0];
if (x.className == "topnav") {
x.className += "responsive";
}
else {
x.className = "topnav";
}
}
.header, .topnav {
width: 100%;
background-color: black;
display: flex;
align-items: center;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a {
font-size: 20px;
color: white;
padding: 10px;
}
#active {
background-color: green;
}
.topnav .icon {
flex-grow: 1;
text-align: right;
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
display: block;
text-align: left;
}
}
<header class="header">
<div class="topnav">
<a href="#" class="hrefs" id="active">Home</a>
<a href="#" class="hrefs">News</a>
<a href="#" class="hrefs">Contacts</a>
<a href="#" class="hrefs">About</a>
<a href="javascript:void(0);" class="icon" onclick="iconMenu()">☰</a>
</div>
</header>