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>
- 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;
}
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
Top comments (33)
When you incorparate a polyfill when deploying you can be certain legacy browsers will work. Best way that work for me is to use PostCSS-plugins in the workspace.
I have to learn about PostCSS
Make it one of your near future learning goals. Developing is SO much more fun with a good eco system. (VSCode, Vite, PostCSS)
PostCCS is not too difficult. It does the hard work fór you!
I checked PostCSS and it's cool
Also I found it is used with TailwindCss as well.
I worked with Webpack but will check vite too.
Vite is GREAT for MANY good reasons. Check it out!
You'll never want to use webpack anymore. Webpack is old school. Don't believe me. Believe wat you'll encounter with Vite!
Yeah i would use it for sure
Thanks for the guidance
Merry Christmas and a Happy New Year by the way,
Merry Christmas and Happy New Year to you too
Nice article, but the burger button doesn't seem to work in the demo.
~
Possibly it's a Chrome-only feature you're using, in which case adding a fallback would be good.~Ah just seen the can i use link, probably best to avoid using
:hasas it's not at all well supported.Are you using Firefox as your browser?
Yeah
You can use the
@supportsselector to add the functionality for the remaining browsers.This would be important, as looks like
:hasisn't supported on many mobile browsers - and that's the only time the burger menu will be visible. So using it alone in this situation, is pretty much useless!Yeah for the fallback i have to provide something as i didn't have used javascript, i have to build the logic in css for the same
As seen on caniuse this do not work on firefox... and not on firefox mobile either. My own testing also shows it does not work on firefox but do work in chrome.
Similar way of doing it is possible but without using ":has". Would suggest using that or JS until browser support is up to snuff if going to put a site online. But yeah, interesting to see some new CSS stuff being used.
Yeah that's why i put the caniuse link because the browser support is not vast for has selector But the power it gives in css ,
firefox and other browser will make it supportable in near future
This isn't accessible.
You want to set aria-expanded and other attributes properly.
A details element almost works but still has problems.
Also please use a nav labelled by a heading and do not put interactive elements inside a button. Interactive elements inside a button are ignored by the accessibility tree.
Something like the following might be a better start towards a better nav menu.
Sure i will take care of it
Nicely done! Kudos 🎉 Hopefully Firefox will stop this silliness of not supporting :has out of the box
Yeah right 😂
Great creation 👍👌
Thank you
Interesting! Using checkbox to create the toggle 🔥
Thank you
Thank You! Nice work.
Welcome
You should use min-width media queries instead, it makes coding responsive stuff easier.
Yeah that's also good