Trying to make a responsive hamburger menu, why doesn't my media query work?

HTML-CSS
1

I’m trying to make a basic responsive navbar which under certain pixels will display a hamburger menu instead of the navlinks. However, the @media doesn’t seem to do anything at all. I really thought I did everything right so I have no idea what is wrong here?

HTML code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
        <title>Site Title</title>
        <!-- <meta name="description" content=""> -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./styles.css">
        <script></script>
    </head>
    <body>
        <nav class="navbar">
            <div class="brand-title">Brand Name</div>
            <a href="#" class="toggle-button">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </a>
            <div class="nav-links">
                <ul>
                    <li><a href="#"></a>Home</li>
                    <li><a href="#"></a>About</li>
                    <li><a href="#"></a>Contact</li>
                </ul>
            </div>
        </nav>
    </body>
</html>

CSS Code

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    color: white;
}

.brand-title {
    font-size: 1.5rem;
    margin: .5rem;
}

.nav-links ul {
    margin: 0;
    padding: 0;
    display: flex;
}

.nav-links li {
    list-style: none;
    padding: 1rem;
}

.nav-links li a {
    text-decoration: none;
    color: white;
    display: block;
}

.nav-links li:hover {
    background-color: #555;
}

.toggle-button {
    position: absolute;
    top: .75rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

.toggle-button .bar {
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
}

@media (max-width: 800x){
    .toggle-button {
        display: flex;
    }
    
    .nav-links {
        display: none;
        
    }
}
2

By the way for further clarification, if I manually change the “display: none” under .toggle-button to “display: flex” that works, but @media doesn’t do this for me whatever pixel I enter.

3

OKAY, so, I fixed it but I don’t know why it wasn’t working. I just wrote the same thing but it worked this time. I am using VS Code by the way so it may be a bug or something.

@media (max-width: 800px) {
    .toggle-button {
        display: flex;
    }

    .nav-links {
        display: none;   
    }
}

@media (max-width:700x){
    .toggle-button {
        display: flex;
    }

    .nav-links {
        display: none;
        
    }
}

The top one works (I added that later), bottom one doesn’t. Pixels don’t matter, the spacing around the 700px doesn’t matter, the bottom one is not responsive at all, top one works. I think I started out writing the bottom @media query wrong, so that messed up the code on the backend.

I suppose this is the coding equivalent of turning the machine off and on again lol

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.