Why does my toggle menu not show the effects of the :hover when working with media queries?

Question

I have created a Toggle Nav where you click a button and the navbar pops out and everything works fine on desktop. When I make it responsive the Toggle Nav has no problems except it won't show the styles for the mobile-menu-itmes:hover class. Not quite sure what I'm doing wrong....It has to be something with the CSS but I can't figure it out. Any help is appreciated it, thanks.

HTML

  <div class="menu-btn" id="toggle-btn">
    <i class="fas fa-bars fa-2x"></i>
    <div class="mobile-menu">
      <li><a class="mobile-menu-items" href="#">Home</a></li>
      <li><a class="mobile-menu-items" href="#">About</a></li>
      <li><a class="mobile-menu-items" href="#">Services</a></li>
      <li><a class="mobile-menu-items" href="#">Portfolio</a></li>

    </div>
  </div>

SCSS

 .menu-btn {
  color: #4f6df5;
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
  padding: 1rem;
  display: none;


.mobile-menu {
  display: none;
  flex-direction: column;
  list-style: none;
  height: 100vh;
  width: 50%;
  padding: 40px;

  .mobile-menu-items {
    font-size: .9rem;
    text-decoration: none;
    color: #242424;
    line-height: 4;
    display: block;
  }

  .mobile-menu-items:hover {
    background: #4f6df5;
    padding: .5rem;
    color: white;
    display: block;
   }
 }
}

Javascript

const menuBtn = document.querySelector('#toggle-btn');
const mobileMenu = document.querySelector('.mobile-menu');

menuBtn.addEventListener('click', clickedBtn);

function clickedBtn() {
//mobileMenu.classList.toggle("mobile-menu");

if (mobileMenu.style.display === 'none') {
    mobileMenu.style.display = 'block';
} else {
    mobileMenu.style.display = 'none';
   }
}

Media Queries

@media screen and (max-width: 768px) {
.menu-btn {
display: flex;



}

Answer 1

You have a missing closing curly bracket } in your media query, so it is not rendering these styles. I've added background-color: red to the media query to show you that it works.

 .menu-btn { color: #4f6df5; font-size: 1.1rem; font-weight: 900; cursor: pointer; padding: 1rem; display: flex; } .mobile-menu { display: flex; flex-direction: column; list-style: none; height: 100vh; width: 50%; padding: 40px; } .mobile-menu-items { font-size: .9rem; text-decoration: none; color: #242424; line-height: 4; display: block; } .mobile-menu-items:hover { background: #4f6df5; padding: .5rem; color: white; display: block; } @media screen and (max-width: 768px) { .menu-btn { display: flex; background-color: red; } } 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous" /> <div class="menu-btn" id="toggle-btn"> <i class="fas fa-bars fa-2x"></i> <div class="mobile-menu"> <li><a class="mobile-menu-items" href="#">Home</a></li> <li><a class="mobile-menu-items" href="#">About</a></li> <li><a class="mobile-menu-items" href="#">Services</a></li> <li><a class="mobile-menu-items" href="#">Portfolio</a></li> </div> </div> 

EDIT : SCSS is a superset of CSS, so you can move the curly brackets for .menu-btn and .mobile-menu back to the end where you had them initially and it will work the exact same. SO code snippets do not support SCSS unfortunately.

Answer 2

You are not closing curly braces for

@media screen and (max-width: 768px) {
  .menu-btn {
  display: flex;
  }
}

so it is not showing hover effect , Check Updated Fiddle