Responsive Navbar without Javascript

Read Time:1 Minute, 4 Second

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

<span class="nt">&lt;header&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"logo"</span><span class="nt">&gt;</span> <span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"logo-text"</span><span class="nt">&gt;</span>LOGO<span class="nt">&lt;/h1&gt;</span> <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"hamburger-icon"</span><span class="nt">&gt;</span> <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span> <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa-solid fa-bars"</span><span class="nt">&gt;&lt;/i&gt;</span> <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa-solid fa-x"</span><span class="nt">&gt;&lt;/i&gt;</span> <span class="nt">&lt;/label&gt;</span> <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"dropdown"</span> <span class="nt">/&gt;</span> <span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"navigation"</span><span class="nt">&gt;</span> <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span> <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>About<span class="nt">&lt;/a&gt;&lt;/li&gt;</span> <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Contact<span class="nt">&lt;/a&gt;&lt;/li&gt;</span> <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/header&gt;</span>

<header> <div class="logo"> <h1 class="logo-text">LOGO</h1> <button class="hamburger-icon"> <label for="dropdown"> <i class="fa-solid fa-bars"> <i class="fa-solid fa-x"> </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.

<span class="c">/* hiding the hamburger icon for the desktop view */</span>
<span class="nc">.hamburger-icon</span><span class="p">{</span>
<span class="nl">display</span><span class="p">:</span><span class="nb">none</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span><span class="nb">none</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span><span class="nb">transparent</span><span class="p">;</span>
<span class="p">}</span> <span class="c">/* Hiding the checkbox default styling */</span>
<span class="nc">.hamburger-icon</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s1">"checkbox"</span><span class="o">]</span> <span class="p">{</span> <span class="nl">appearance</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">.</span>
<span class="o">.</span>
<span class="o">.</span>
<span class="c">/* targeting the element for the viewport less than 600px*/</span>
<span class="k">@media</span> <span class="n">screen</span> <span class="n">and</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span> <span class="m">600px</span><span class="p">)</span> <span class="p">{</span>
<span class="c">/* Hiding the nav links with height and overflow */</span> <span class="nc">.navigation</span> <span class="p">{</span> <span class="nl">height</span><span class="p">:</span><span class="m">0</span><span class="p">;</span> <span class="nl">overflow</span><span class="p">:</span><span class="nb">hidden</span><span class="p">;</span> <span class="nl">flex-direction</span><span class="p">:</span> <span class="n">column</span><span class="p">;</span> <span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="nl">transition</span><span class="p">:</span><span class="n">all</span> <span class="m">0.5s</span> <span class="n">ease-in-out</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* It will put the Logo text at left end and Hamburger at the right end of the header */</span>
<span class="nc">.logo</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span> <span class="nl">justify-content</span><span class="p">:</span> <span class="n">space-between</span><span class="p">;</span> <span class="p">}</span>
<span class="p">}</span> <span class="c">/* Making the hamburger button visible */</span>
<span class="nc">.hamburger-icon</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* Initially hiding the cross icon */</span>
<span class="nc">.fa-x</span><span class="p">{</span> <span class="nl">display</span><span class="p">:</span><span class="nb">none</span><span class="p">;</span> <span class="p">}</span> <span class="c">/*determining whether the header contains a checkbox input that is checked before expanding the navigation's height to 100 pixels to make it visible.*/</span> <span class="nt">header</span><span class="nd">:has</span><span class="o">(</span><span class="nc">.hamburger-icon</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s1">"checkbox"</span><span class="o">]</span><span class="nd">:checked</span><span class="o">)</span> <span class="nc">.navigation</span> <span class="p">{</span> <span class="nl">margin-top</span><span class="p">:</span> <span class="m">1rem</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span><span class="m">100px</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* Hiding the bars icon on checkbox checked state */</span> <span class="nt">header</span><span class="nd">:has</span><span class="o">(</span><span class="nc">.hamburger-icon</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s1">"checkbox"</span><span class="o">]</span><span class="nd">:checked</span><span class="o">)</span> <span class="nc">.fa-bars</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span><span class="nb">none</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* Showing the cross icon on checkbox checked state */</span> <span class="nt">header</span><span class="nd">:has</span><span class="o">(</span><span class="nc">.hamburger-icon</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s1">"checkbox"</span><span class="o">]</span><span class="nd">:checked</span><span class="o">)</span> <span class="nc">.fa-x</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span><span class="n">inline-block</span><span class="p">;</span> <span class="p">}</span>

/* 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; }

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 – [email protected]

^^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

Source: https://dev.to/shubhamtiwari909/responsive-navbar-without-javascript-3p7o