JS не изменит скрытое для навигации свойство display с none на flex. Я пробовал с! Важно, это, кажется, работает в некоторых случаях, но я хотел бы знать, почему это не работает, чтобы я мог понять это лучше.
Когда я нажимаю кнопку, этому элементу присваивается новый класс, но свойство остается неизменным.
То, что я пытался сделать: скрытое навигационное меню появляется, только когда я нажимаю кнопку на весь экран, когда экран меньше 700 пикселей, и навигационную линию в соответствии с логотипом внутри, когда экран шире, чем 700 пикселей .
function myFunction() {
var fullnavigation = document.getElementById("nav-hidden");
fullnavigation.classList.toggle("open-nav");
}
body{
margin: 0;
font-family: 'Roboto', sans-serif;
}
header{
background-color: #009933;
width:100%;
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.logo img{
display: block;
height: 4em;
}
@media screen and (max-width:700px){
.nav-line{
display: none;
}
.open-nav{
display: flex;
}
.nav-hidden{
display: none;
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-color: #009933;
flex-direction: column;
}
.nav-button{
display: block;
color: #ffffff;
background-color: transparent;
padding: 0px;
border: 0px;
cursor: pointer;
font-size: 4em;
z-index: 9999;
}
}
<!DOCTYPE html>
<html lang="sl">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="slike\favicon\favicon.png" type="image/gif" size="128x128">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="js\index.js"></script>
<link rel="stylesheet" href="css\index.css">
</head>
<body>
<header>
<div class="logo"><img src="" alt="logo"></div>
<button id="nav-button" onclick="myFunction()">☰</button>
<nav id="nav-line" class="nav-line">
<div class="nav-text"><a href="#">DOMOV</a></div>
<div class="nav-text"><a href="#">O NAS</a></div>
<div class="nav-text"><a href="#">KONTAKT</a></div>
<div class="nav-text"><a href="#">POVPRAŠEVANJE</a></div>
</nav>
</header>
<nav id="nav-hidden" class="nav-hidden">
<div class="nav-text"><a href="#">DOMOV</a></div>
<div class="nav-text"><a href="#">O NAS</a></div>
<div class="nav-text"><a href="#">KONTAKT</a></div>
<div class="nav-text"><a href="#">POVPRAŠEVANJE</a></div>
</nav>
</body>
</html>