Я делаю адаптивную панель навигации. Я сделал так, чтобы глобальный стиль был переключаемой панелью навигации, а при 600px это уменьшилось со 100% до 30%, но теперь я хочу, чтобы, когда он достигал 1000px, он становился stati c navbar без «меню» и "menu1". Немного застрял при попытке получить stati c navbar после 1000px. Кажется, что он просто исчезает, но не уверен, как заставить это сделать c с переключенной навигационной панели.
Куда я иду?
код:
function toggleNav() {
document.getElementById("sideNav").classList.toggle('open');
}
closeNav.addEventListener('click', toggleNav);
openNav.addEventListener('click', toggleNav);
body {
background-color: white;
font-family: sans-serif;
margin: 0;
}
h1 {
color: lightpink;
font-size: 40px;
text-align: center;
padding: 30px;
}
nav {
display: flex;
flex-direction: column;
align-items: stretch;
text-align: center;
height: 100%;
width: 100%;
top: 0; /* Stay at the top */
left: -100%;
position: fixed;
z-index: 1; /* Stay on top */
background-color: white;
overflow-x: hidden;
transition: 2s;
opacity: 0.5;
padding: 2px;
}
nav .menu, .menu1 {
text-align: right;
}
nav.open {
left: 0;
cursor: pointer;
font-size: 40px;
align-content: right;
opacity: 1;
}
nav a, .menu, .menu1 {
padding: 0.25em 0.5em;
text-decoration: none;
font-size: 25px;
color: pink;
display: block;
transition: 2s;
}
.menu {
top: 0;
}
a {
transition: 2s ease ;
padding: 2px;
}
main {
width: 85%
padding: 0px 30px;
}
/* Tablet nav bar */
@media only screen and (min-width: 600px) {
nav {
width: 30%;
}
}
@media only screen and (min-width: 1000px) {
body {
margin: 1em auto;
}
nav {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: stretch;
height: 5%;
width: 100%;
}
a:hover {
background-color: blanchedalmond;
}
.menu1, .menu {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cake Shop</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<span class="menu" id="openNav">☰</span>
<nav id="sideNav">
<span class="menu1" id="closeNav">×</span>
<a href="index.html">Home</a>
<a href="recipes.html">Recipes</a>
<a href="ingredients.html">Ingredients</a>
<a href="about.html">About</a>
</nav>
<h1 id="something">Cakes 'n' Bakes</h1>
</header>
<main>
<script src="js/scripts.js"></script>
<script src="js/index.js"></script>
</main>
</body>
</html>