Menu Close

Responsive Navbar without Javascript

Responsive Navbar without Javascript

Greetings to all. Today I’ll demonstrate how to make a responsive navbar without Javascript that has a dropdown effect for mobile devices. The major CSS section will be explained, and the remaining code will be provided in the code pen at the end of this blog.

Let’s get started…

I’ll use the :has() selector for the toggle effect; you can see which browsers support it here.
https://caniuse.com/?search=has



HTML –

<header>
  <div class="logo">
    <h1 class="logo-text">LOGO</h1>
    <button class="hamburger-icon">
      <label for="dropdown">
        <i class="fa-solid fa-bars"></i>
        <i class="fa-solid fa-x"></i>
      </label>
      <input type="checkbox" id="dropdown" />
    </button>
  </div>
  <ul class="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>
Enter fullscreen mode

Exit fullscreen mode

  • I’m putting a checkbox field inside the button to create a toggling effect. The bars and cross icons will likewise be toggled by this checkbox.



CSS –

/* hiding the hamburger icon for the desktop view */
.hamburger-icon{
display:none;
border:none;
background-color:transparent;
}

/* Hiding the checkbox default styling */
.hamburger-icon input[type="checkbox"] {
  appearance: none;
}
.
.
.
/* targeting the element for the 
viewport less than 600px*/
@media screen and (max-width: 600px) {
/* Hiding the nav links with height and overflow */
 .navigation {
    height:0;
    overflow:hidden;
    flex-direction: column;
    align-items: center;
    transition:all 0.5s ease-in-out;
  }

/* It will put the Logo text at left end 
and Hamburger at the right end of the header */
.logo {
    display: flex;
    justify-content: space-between;
  }
}

/* Making the hamburger button visible */
.hamburger-icon {
    display: block;
  }

/* Initially hiding the cross icon */
.fa-x{
    display:none;
  }

/*determining whether the header contains a checkbox input that is checked before expanding the navigation's height to 100 pixels to make it visible.*/
  header:has(.hamburger-icon input[type="checkbox"]:checked) .navigation {
    margin-top: 1rem;
    height:100px;
  }

/* Hiding the bars icon on checkbox checked state */
  header:has(.hamburger-icon input[type="checkbox"]:checked) .fa-bars {
    display:none;
  }

/* Showing the cross icon on checkbox checked state */
  header:has(.hamburger-icon input[type="checkbox"]:checked) .fa-x {
    display:inline-block;
  }
Enter fullscreen mode

Exit fullscreen mode



Codepen –

THANK YOU FOR CHECKING THIS POST
You can contact me on –
Instagram – https://www.instagram.com/supremacism__shubh/
LinkedIn – https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email – shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ –> https://www.buymeacoffee.com/waaduheck <–

Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd

https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

View Source
Posted in web development