Я пытаюсь создать меню навигации CSS.Я хочу, чтобы ссылки были расположены вертикально, когда меню открывается на небольших устройствах.Но навигационные ссылки по-прежнему установлены горизонтально.Кто-нибудь может сказать мне, почему это происходит и что я могу сделать, чтобы достичь этого?Заранее спасибо!
function navExpand() {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
burger.addEventListener('click', function() {
//TOGGLE NAV
nav.classList.toggle('nav-links-active');
});
}
navExpand();
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
width: 100vw;
height: 8vh;
display: flex;
color: rgb(226, 226, 226);
background-color: rgb(30, 80, 210);
font-family: calibri;
justify-content: space-around;
letter-spacing: 2px;
}
.logo {
font-size: 30px;
padding-top: 6.5px;
}
ul {
font-size: 18px;
font-weight: bold;
display: flex;
float: right;
text-transform: uppercase;
}
li {
padding-left: : 30px;
letter-spacing: 3px;
padding-right: 30px;
list-style: none;
padding-top: 14px;
}
.burger {
margin: 12px;
display: none;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
}
@media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: rgb(30, 80, 210);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
vertical-align: middle;
}
.burger {
display: block;
}
.nav-links-active {
transform: translateX(0%);
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<nav>
<div class="logo">
MENU
</div>
<div class="nav-links">
<ul>
<li class="links" id="home">
<a href="#"></a>Home</li>
<li class="links" id="about">
<a href="#"></a>About</li>
<li class="links" id="portfolio">
<a href="#"></a>Portfolio</li>
<li class="links" id="contact">
<a href="#"> </a> Contact</li>
</ul>
</div>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="main.js"></script>
</body>
</html>
Когда ширина экрана меньше 768 пикселей, я хочу, чтобы ссылки скрывались, а когда пользователь нажимал кнопку переключения, они отображались вертикально.