The @media CSS selector seems to be malfunctioning as it does not respond to changes in screen size

Question

The @media CSS selector seems to be malfunctioning as it does not respond to changes in screen size

I've been struggling to implement a burger menu button that appears in the right-hand corner of the screen once it reaches a certain size (960px). However, when I resize the window, the button disappears.

index.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">
    <title>scroll website</title>
    <link rel="stylesheet" href="style.css" type="text/css">  
</head>
<body>
    <!-- Navbar section -->
    <nav class="navbar">
        <div class="navbar__container">
            <a href="#home" id="navbar__logo">COLOR</a>
            <div class="navbar__toggle" id="mobile-menu">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div> 
            <ul class="navbar__menu">
                <li class="nav__item">
                    <a href="#home" class="navbar__links" id="home-page">Home</a>
                </li>
                <li class="nav__item">
                    <a href="#about" class="navbar__links" id="about-page">About</a>
                </li>
                <li class="nav__item">
                    <a href="#services" class="navbar__links" id="services-page">Services</a>
                </li>
                <li class="navbar__btn">
                    <a href="#sign-up" class="button" id="signup">Sign Up</a>
                </li>
            </ul>
        </div>
    </nav>
        
</body>
</html>

style.css : (if you comment out 'top: -1000px' in the media query, the menu screen will drop down)

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Kumbh Sans', sans-serif;
    scroll-behavior: smooth;
}

.navbar {
    background: #131313;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    position: sticky;
    top: 0;
    z-index: 998;
}

.navbar__container {
    display: flex;
    justify-content: space-between;
    height: 80px;
    z-index: 1;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 50px;
}

#navbar__logo {
    background-color: #ff8177;
    background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    display:flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    font-size: 2rem;
}

.navbar__menu {
    display: flex;
    align-items: center;
    list-style: none;
}

.navbar__item {
    height: 80px;
}

.navbar__links {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 125px;
    text-decoration: none;
    height: 100%;
    transition: all 0.3s ease;
}

.navbar__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    width: 100%;
}

.button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: 10px 20px;
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
    border-radius:4px;
    background: #833ab4;
    background: -webkit-linear-gradient(to right, #fcb845, #fd1d1d, #833ab4);
    background: linear-gradient(to right, #fcb845, #fd1d1d, #833ab4);
    color: #fff;
    transition: all 0.3s ease;
}


.navbar__links:hover {
    color: #9518fc;
    transition: all 0.3s ease;
}



@media screen and (max-width: 960px) {
    .navbar__container {
        display: flex;
        justify-content: space-between;
        height: 80px;
        z-index: 1;
        width: 100%;
        max-width: 1300px;
        padding: 0; 
    }

    .navbar__menu {
        display: grid;
        grid-template-columns: auto;
        margin: 0;
        width: 100%;
        position: absolute;
        top: -1000px;
        opacity: 1;
        transition: all 0.5s ease;
        z-index: -1;
        background: #131313;
        
    }

    .navbar__menu.active {
        background: #131313;
        top: 100%;
        opacity: 1;
        transition: all 0.5s ease;
        z-index: 99;
        height: 60vh;
        font-size: 1.6rem;
    }

    #navbar__logo {
        padding-left: 25px;
    }

    #navbar__toggle .bar {
        width: 25px;
        height: 3px;
        margin: 5px auto;
        transition: all 0.3s ease-in-out;
        background: #fff
    }

    .navbar__item {
        width: 100%
    }

    .navbar__links {
        text-align: center;
        padding: 2rem;
        width: 100%;
        display: table;
    }

    .navbar__btn {
        padding-bottom: 2rem;
    }

    .buttom {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80%;
        height: 80px;
        margin: 0;
    }

    #mobile-menu {
        position: absolute;
        top: 20%;
        right: 5%;
        transform: translate(5%, 20%);
    }

    .navbar__toggle .bar {
        display: block;
        cursor: pointer;
    }

   
}

I would greatly appreciate any assistance as I have exhausted all possible solutions without success.

javascript html css

Answer 1

Answer №1

The reason for the lack of visibility

<div class="navbar__toggle" id="mobile-menu">
   <span class="bar"></span>
   <span class="bar"></span>
   <span class="bar"></span>
</div>

There is no content visible at this location.

To improve visibility, consider adding an icon or text inside the div element, or filling in the spans with content. Keep in mind that the default text color is black, which may be blending with a dark background causing it to not be seen clearly. Adjusting the color will help enhance visibility.

Answer 2

The reason for the lack of visibility

<div class="navbar__toggle" id="mobile-menu">
   <span class="bar"></span>
   <span class="bar"></span>
   <span class="bar"></span>
</div>

There is no content visible at this location.

To improve visibility, consider adding an icon or text inside the div element, or filling in the spans with content. Keep in mind that the default text color is black, which may be blending with a dark background causing it to not be seen clearly. Adjusting the color will help enhance visibility.

Answer 3

Answer №2

At this point, you haven't taken any action. Start by adding a navbar and then include a script. The example below uses your classlist to toggle:

document.getElementById('mobile-menu').addEventListener("click", function(e) {
  this.classList.toggle('open');
  const navbar = document.querySelector('.navbar__menu');
  navbar.classList.toggle('active');
});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Kumbh Sans', sans-serif;
  scroll-behavior: smooth;
}
// Rest of the CSS code here...

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<body>
  <!-- Navbar section -->
  // Rest of the HTML code here...
</body>

Full code:

<!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">
  <title>scroll website</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Kumbh Sans', sans-serif;
      scroll-behavior: smooth;
    }
    
    .navbar {
      background: #131313;
      height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.2rem;
      position: sticky;
      top: 0;
      z-index: 998;
    }
    
    .navbar__container {
      display: flex;
      justify-content: space-between;
      height: 80px;
      z-index: 1;
      width: 100%;
      max-width: 1300px;
      margin: 0 auto;
      padding: 0 50px;
    }
    
    // Rest of the CSS code here...
  </style>
</head>

<body>
  <!-- Navbar section -->
  // Rest of the HTML code here...
  
</body>

<script>
  document.getElementById('mobile-menu').addEventListener("click", function(e) {
    this.classList.toggle('open');
    const navbar = document.querySelector('.navbar__menu');
    navbar.classList.toggle('active');
  });
</script>

</html>

Answer 4

At this point, you haven't taken any action. Start by adding a navbar and then include a script. The example below uses your classlist to toggle:

document.getElementById('mobile-menu').addEventListener("click", function(e) {
  this.classList.toggle('open');
  const navbar = document.querySelector('.navbar__menu');
  navbar.classList.toggle('active');
});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Kumbh Sans', sans-serif;
  scroll-behavior: smooth;
}
// Rest of the CSS code here...

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<body>
  <!-- Navbar section -->
  // Rest of the HTML code here...
</body>

Full code:

<!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">
  <title>scroll website</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Kumbh Sans', sans-serif;
      scroll-behavior: smooth;
    }
    
    .navbar {
      background: #131313;
      height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.2rem;
      position: sticky;
      top: 0;
      z-index: 998;
    }
    
    .navbar__container {
      display: flex;
      justify-content: space-between;
      height: 80px;
      z-index: 1;
      width: 100%;
      max-width: 1300px;
      margin: 0 auto;
      padding: 0 50px;
    }
    
    // Rest of the CSS code here...
  </style>
</head>

<body>
  <!-- Navbar section -->
  // Rest of the HTML code here...
  
</body>

<script>
  document.getElementById('mobile-menu').addEventListener("click", function(e) {
    this.classList.toggle('open');
    const navbar = document.querySelector('.navbar__menu');
    navbar.classList.toggle('active');
  });
</script>

</html>

The @media CSS selector seems to be malfunctioning as it does not respond to changes in screen size

Answer №1

Answer №2

Similar questions

Using input masking to restrict user input to only numbers and English alphabet characters

PHP/HTML code being disrupted by the improper use of quotation marks

I made a mistake with my git repository. Should I try to fix it or just start fresh?

Including a cancel button to close the open window

AJAX issue: variable returning '0' instead of the necessary data for sending

modify the class's CSS style

Using Reactjs to Send Emails

What prevents certain scenarios from being encapsulated within a try/catch block?

Retrieving information from a JSON file results in the value of "undefined"

The parameter in a JavaScript for loop

In what way do Tumblr and Google+ creatively arrange images like a jigsaw puzzle?

Having trouble with centering a div in IE8?

Adjust rankings based on the number of upvotes received by a project

Incorporate Material Design Lite and AMP into your Angular 5 project for a sleek

Vetur's "go to definition" feature is unable to redirect users after pressing alt and clicking

trigger the C# event handler and then follow up with the execution of a JavaScript function

Tips for loading images from the local file system in Angular JS

When the user signs in with Next-auth, they will be redirected to /signin with

Show each individual layer from a KMZ file on a map with the ArcGIS API for JavaScript

"Substitute the dropdown arrow in the select menu with a font awesome