Issue
i was trying to make a simple navbar which collapses to hamburger using CSS, HTML and JavaScript. On typing out the css when the screen is turned to smaller media query fires but doesn't seem to place the bar icon properly. That's not the problem however if you remove the code that's not part of the media query. I don't know what i've done wrong so help would really be appreciated. HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/5c0ef76cf3.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./practice.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@800&family=Secular+One&display=swap"
rel="stylesheet">
<title>Navbar using JS</title>
</head>
<body>
<main>
<nav>
<div class="nav-center">
<div class="nav-header">
<h3>Coding lessons.</h3>
<button class="nav-toggle">
<i class="fas fa-bars"></i>
</button>
</div>
<ul class="content">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="socialicons">
<li>
<a href="https://www.twitter.com">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="https://www.facebook.com">
<i class="fab fa-facebook"></i>
</a>
</li>
<li>
<a href="https://www.twitch.com">
<i class="fab fa-twitch"></i>
</a>
</li>
<li>
<a href="https://www.facebook.com">
<i class="fab fa-facebook-messenger"></i>
</a>
</li>
</ul>
</div>
</nav>
<script src="./app.js"></script>
</main>
</body>
</html>
CSS code:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: "Nanum Myeongjo", serif;
font-family: "Secular One", sans-serif;
letter-spacing: 0.2rem;
}
.nav-center {
display: flex;
justify-content: space-between;
align-items: center;
background-color: cornflowerblue;
font-size: 1.1rem;
box-shadow: -1px 9px 13px gray;
}
.nav-toggle {
display: none;
}
.content {
height: auto;
display: flex;
list-style: none;
}
.content li a {
text-decoration: none;
cursor: pointer;
margin: 0 0.8rem;
padding: 0.6rem 0.8rem;
transition: 0.5s all linear;
}
.content li a:hover {
background-color: rgba(172, 255, 47, 0.52);
border-radius: 0.7rem;
}
.socialicons {
display: flex;
padding: 1.1rem 1.9rem;
list-style: none;
}
.socialicons a {
margin: 0 0.4rem;
font-size: 1.4rem;
transition: 0.5s all linear;
}
.socialicons a:hover {
color: lightblue;
}
@media screen and (max-width: 1000px) {
.nav-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: cornflowerblue;
padding: 1.1rem;
}
.nav-toggle {
display: contents;
background: transparent;
border: transparent;
font-size: 1.5rem;
transition: 0.5s all linear;
color: blueviolet;
cursor: pointer;
}
.nav-toggle:hover {
transform: translate(90deg);
color: rgba(137, 43, 226, 0.582);
}
.content a {
display: block;
list-style: none;
text-decoration: none;
margin: 0.8rem 0;
font-size: 1.2rem;
text-transform: capitalize;
transition: 0.5s all linear;
}
.content a:hover {
background-color: darkolivegreen;
padding-left: 1.6rem;
}
.content {
height: 0;
overflow: hidden;
transition: 0.5s all linear;
}
.show-content {
height: 10rem;
}
.socialicons {
display: none;
}
}
JavaScript:
const navToggle = document.querySelector('.nav-toggle');
const links = document.querySelector('.content');
navToggle.addEventListener('click', function(){
links.classList.toggle('show-content');
});
Solution
It's because you apply upper div .nav-conter to flex property and didn't initiate it inside the media query. Add the css like below. It will work as you intended.
@media screen and (max-width: 1000px) {
.nav-center {
display: block;
}
Answered By - Dali
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.