Somehow media query section is being affected from the normal CSS code

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

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published