Question 342586 in Html Question posted in
Some basic documentation can be found here.

Html – Hamburger Menu issue – nav menu not disappearing

I am having an issue getting my hamburger menu to remain and nav menu to disappear. Is anyone able to help?

see html

 <nav>
            <a href="#" class="toggle-button">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>    
            </a>
            <!-- Navigation Links -->
           <a href="index.html">Home</a>
            <a href="whatson.html">Whats on</a> 
            <a href="businesses.html">Businesses</a> 
            <a href="gallery.html">Gallery</a>
            <a href="contactus.html">Contact us</a>
            
            

        </nav>

and css


nav {
    grid-area: nav;
   
   
    align-items: center;
    background-color: rgb(0,0,0);
    padding: 10px;
    border: 3px solid rgb(0,0,0);
    display:inline-block;
    background-size: 100% auto;
    background-repeat: no-repeat;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    width: 100%;
    
}
nav a {
    display: inline-block;
    background-color: rgb(252, 252, 252); 
    color: rgb(0); 
    padding: 10px 15px; 
    
    border: 2px solid black; 
    border-radius: 5px; 
    font-size: 18px; 
    font-weight: bold; 
    transition: background-color 0.3s, transform 0.3s; /* Smooth transition for hover effects */
    text-decoration: none;
    margin: 0 10px;
        }

nav a:hover {
    background-color: rgb(140, 71, 147); /* Change background on hover */
    color: rgb(255, 255, 255); /* Change text color on hover */
    transform: scale(1.05); /* Slightly increase size on hover */
}

/*MOBILE*/

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


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

@media (max-width: 700px)
{
    .toggle-button
    {
        display:flex;
    }
    
    .nav
    {
        display: none;
    }
    
    .nav a
    {
        display: none;
    }
}

I have been trying for hours and I cannot understand what’s going on. Thanks in advance

Ive tried everything I can think of! Any help will be greatly appreciated.

This is what is happening

Tags:

2

Answers


  1. 0

    Try something like this:
    Take out the toggle-button from the nav so it is not made invisible when you toggle it to be hidden.
    Give the nav an id: nav and class: hide which means that the nav will not show on smaller devices like mobiles due to your media query.
    Then use JS to toggle the hide class on and off when the user clicks the button.

    document.querySelector(".toggle-button").addEventListener("click", () => {
  document.querySelector("#nav").classList.toggle("hide")
})
    nav {
  grid-area: nav;
  align-items: center;
  background-color: rgb(0, 0, 0);
  padding: 10px;
  border: 3px solid rgb(0, 0, 0);
  display: inline-block;
  background-size: 100% auto;
  background-repeat: no-repeat;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 100%;
}

nav a {
  display: inline-block;
  background-color: rgb(252, 252, 252);
  color: rgb(0);
  padding: 10px 15px;
  border: 2px solid black;
  border-radius: 5px;
  font-size: 18px;
  font-weight: bold;
  transition: background-color 0.3s, transform 0.3s;
  /* Smooth transition for hover effects */
  text-decoration: none;
  margin: 0 10px;
}

nav a:hover {
  background-color: rgb(140, 71, 147);
  /* Change background on hover */
  color: rgb(255, 255, 255);
  /* Change text color on hover */
  transform: scale(1.05);
  /* Slightly increase size on hover */
}


/*MOBILE*/

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

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

@media (max-width: 700px) {
  .toggle-button {
    display: flex;
  }
  .hide {
    display: none
  }
}
    <a href="#" class="toggle-button">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</a>
<nav id="nav" class="hide">
  <!-- Navigation Links -->
  <a href="index.html">Home</a>
  <a href="whatson.html">Whats on</a>
  <a href="businesses.html">Businesses</a>
  <a href="gallery.html">Gallery</a>
  <a href="contactus.html">Contact us</a>
</nav>
    Login or Signup to reply.
  2. 0

    You are using a class .nav in your CSS and there is no such class in the HTML. The tag nav doesn’t have a class.

    You would also need to remove the firt display: none from within the media query, since you are already hiding the a tags in the next line.

    So, your media query in your CSS would be:

    @media (max-width: 1000px)
{
    .toggle-button
    {
        display:flex;
    }
   
    
    nav a
    {
        display: none;
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search