responsive Navbar issue

Question

I need to create a dropdown menu in desktop it's okay but in mobile view i have this problem: How can I open and close the navbar through the icon without the need for javascript code. Just html and Css bure. I just need the inside @media.(MOBIL VIEW UNDER 600PX) so when I click on the toogle I can open and close the navbar

here is the code:

body {
  margin: 0px;
  padding: 0px;
  background-color: #edf1fd;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 50px;
  min-width: 120px;
  min-height: auto;
  z-index: 1;
  background-color: #fff;
}

.dropdown-content a {
  float: center;
  color: black;
  padding: 14px 18px;
  text-decoration: none;
  display: block;
  text-align: center;
  text-transform: capitalize;
}

.dropdown-content a:hover {
  background-color: #292929;
  color: #fff;
}

.dropdown:hover .dropdown-content {
  display: block;
  color: #292929;
  background-color: #fff;
}

img {
  width: 55px;
  height: 56px;
}

.toggle {
  display: none;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 2px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background-color: #f4f7ff;
  padding: 10px 50px;
  box-shadow: 2px 2px 12px rgb(0 0 0 / 15%);
}

.menu {
  list-style: none;
  display: flex;
}
.menu li a {
  padding: 10px 15px;
  color: #6c707c;
  font-size: 12px;
}
.active a,
.menu li a:hover {
  background-color: #292929;
  color: #fff !important;
  font-weight: bold;
  transition: all ease 0.8s;
}
#menuToggle {
  display: none;
}

@media (max-width: 600px) {
  .toggle {
    display: block;
  }
  .toggle::before {
    content: "\f0c9";
    font-family: fontAwesome;
    line-height: 0px;
    margin-left: -30px;
  }
  .toggle.active::before {
    content: "\f00d" !important;
  }

  nav {
    padding: 10px 30px;
  }

  nav ul {
    position: absolute;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    background-color: #0f0f0f;
    top: 80px;
    left: 0;
    transition: 0.5s;
    overflow: hidden;
    display: none !important;
    border: 3px solid #1f1f1f;
  }

  nav ul li a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff !important;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px !important;
    padding: 0px !important;
  }
  nav ul {
    padding: 0px;
    margin: 0px;
  }

  .active-menu {
    display: block !important;
  }

  nav ul li a:hover {
    background-color: rgba(27, 29, 32, 0.15);
  }
  .dropdown-content a {
    display: none;
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>A new Navbar</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link href="style.css" rel="stylesheet" />
    <script
      src="https://kit.fontawesome.com/c8e4d183c2.js"
      crossorigin="anonymous"
    ></script>
    

    <body>
      <header>
        <nav>
          <img src="uber-removebg-preview.png" alt="logo" />

          <div class="toggle"></div>
          
          <ul class="menu">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <div class="dropdown">
              <li><a href="#">Services</a></li>
              <div class="dropdown-content">
                <a href="#">Services 1</a>
                <a href="#">Services 2</a>
                <a href="#">Services 3</a>
              </div>
            </div>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      </header>
    
</div>
      
    </body>
  </head>
</html>

maybe this could help you https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css — Aristeidis Karavas, Jun 08 '21 at 12:36

score 0 · Answer 1 · answered Jun 08 '21 at 12:37

Generally people use javascript to do these kind of things but you should be able get it working CSS and HTML only.

You might have to play with visibility or hight of the navbar you want to show or hide. You can use some transitions on top of that to make it look smooth.

For example you can make two classes like following:




.navbar.opened {
  visibility: visible;
  height: 200px; //Whatever you want to set it as
 }
 
 .navbar.closed {
  visibility: hidden;
  height: 0px;
 }

score 0 · Accepted Answer · answered Jun 08 '21 at 15:58

You can place an label and checkbox below the About list item tag. And use the checkbox to use trigger the closing and opening on dropdown.

   <label for="toggle">
   </label>
   <input id="toggle" type="checkbox" />

You can hide the checkbox with absolute positioning and opacity zero.

#toggle{
  opacity: 0;
/*
 position behind the image
*/
}

Then you can use the general sibling selector to show your menu based on checkbox state


   #toggle ~ .dropdown{
       display: none;
   }
   #toggle:checked ~ .dropdown{
      display: block;
   }

responsive Navbar issue

2 Answers2