How to Make a responsive navbar menu with dropdown
As a web developer it is essential to have a good base in HTML and CSS to be able to design web pages especially landing pages and one of the key aspects of landing pages is the navbar menu. In this tutorial I will show you step by step how to make a responsive navbar menu with dropdown using HTML CSS and a little bit of javascript.
Building a responsive navigation bar is a good way to develop your web design skills and improve the user experience. So if you are a beginner learning frontend development and looking to build a navigation bar, you’ve arrived at the right place.
In this article we will start with the example of the intro-section-with-dropdown challenge that you can easily find on frontend mentor. Our navbar will be split in two parts : a left part containing the logo and the menus and a right part with the login and register buttons.
Getting started with the HTML
First of all we will start by establishing the basic structure for a classic hmtl page.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="styles.css"><title>Responsive navbar with dropdown </title></head><body></body></html>
Then we will have to add the navbar element which will contain all the elements that will be displayed on the navbar (Logo, Menu, Login Button,…).
<nav><!-- Logo container --><div class="logo"><h1>Snap</h1></div><!-- Menu container --><div class="menu-container"><!-- Left menu container --><ul class="left-menu"><li class="dropdown"><a href="#" class="menu">Features<ul class="sub-menu"><li><a href="#" class="sub-menu-link"><svgwidth="14"height="16"xmlns="http://www.w3.org/2000/svg"><pathd="M14 3v12a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h1V1a1 1 0 1 1 2 0v1h2V1a1 1 0 1 1 20v1h2V1a1 1 0 0 1 2 0v1h1a1 1 0 0 1 1 1Zm-2 3H2v1h10V6Zm0 3H2v1h10V9Zm0 3H2v1h10v-1Z"fill="#726CEE"/></svg>Todo List</a></li><li><a href="#" class="sub-menu-link"><svgwidth="16"height="16"xmlns="http://www.w3.org/2000/svg"><pathd="M12.667 8.667h-4v4h4v-4ZM11.334 0v1.333H4.667V0h-2v1.333h-1C.75 1.333 0 2.083 0 3v11.333C0 15.25.75 16 1.667 16h12.667C15.25 16 16 15.25 16 14.333V3c0-.917-.75-1.667-1.666-1.667h-1V0h-2Zm3 14.333H1.667V5.5h12.667v8.833Z"fill="#4BB1DA"/></svg>calendar</a></li><li><a href="#" class="sub-menu-link"><svgwidth="13"height="17"xmlns="http://www.w3.org/2000/svg"><pathd="M6.408 13.916c-3.313 0-6-1.343-6-3 0-.612.371-1.18 1-1.654V7.916a5 5 0 0 1 3.041-4.6 2 2 0 0 1 3.507-1.664 2 2 0 0 1 .411 1.664 5.002 5.002 0 0 1 3.041 4.6v1.346c.629.474 1 1.042 1 1.654 0 1.657-2.687 3-63Zm0 1c.694 0 1.352-.066 1.984-.16.004.054.016.105.016.16a2 2 0 0 1-4 0c0-.055.012-.106.016-.16.633.0941.29.16 1.984.16Z"fill="#EDD556"/></svg>Reminders</a></li><li><a href="#" class="sub-menu-link"><svgwidth="16"height="16"xmlns="http://www.w3.org/2000/svg"><pathd="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm0 2.133a5.867 5.867 0 1 0 0 11.734A5.867 5.867 0 0 0 8 2.133ZM83.2a4.8 4.8 0 1 1 0 9.6 4.8 4.8 0 0 1 0-9.6Zm-.533 2.667a.533.533 0 0 0-.534.533v2.133c0 .295.24.534.534.534h3.2a.533.533 0 0 0 0-1.067H8V6.4a.533.533 0 0 0-.533-.533Z"fill="#8E4CB6" /></svg>Planning</a></li></ul></a></li><li class="dropdown"><a href="#" class="menu">Company<ul class="sub-menu2"><li><a href="#" class="submenulink">History</a></li><li><a href="#" class="submenulink">Our Team</a></li><li><a href="#" class="submenulink">Blog</a></li></ul></a></li><li><a href="#" class="menu">Carrers</a></li><li><a href="#" class="menu">About</a></li></ul><!-- Right menu container --><div class="right-menu"><span>Login</span><button class="register-btn">Register</button></div></div></nav>
Once done, this is what you get
Now let’s take a moment to focus on the structure of our navbar. First I put all my menu items in an ul element with class “left-menu” then create a li element for each menu item containing an ‘a’ element with class “menu”. Ok now for the menu items that have a dropdown menu I assign them a special class to be able to easily select them later, so the li elements that have a dropdown have a class “dropdown” and an ‘a’ element that contains another ul element with class “submenu” having the same structure as the parent ul element “left-menu”.
So to sum up to make a menu we use very often an ul element to arrange the menu items in li elements and if a menu item has a dropdown we just have to create an ul element in this li element and that’s it.
Adding some basics CSS style
:root{--primary-color: #000;--secondary-color: hsl(0, 0%, 41%);--tertiary: rgba(0, 0, 0, 0.2);}*{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Epilogue', sans-serif;}
Styling the navbar Using flexbox and positioning
We are going to use mainly the css attribute display flex which is a fantastic css attribute that is essential to know.The left menu needs some attention because we have to set the opacity: 0; for normal conditions and set it to opacity: 1; when someone hovers over it.
:root{--primary: #000;--secondary: hsl(0, 0%, 41%);--tertiary: rgba(0, 0, 0, 0.2);--fouthy: hsl(231, 58%, 41%);}*{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Epilogue', sans-serif;}nav{display: flex;align-items: center;justify-content: space-between;color: hsl(0, 0%, 41%);padding: 1em;box-shadow: 0px 8px 16px 0px var(--tertiary);}.menu-container{display: flex;flex: 1;justify-content: space-between;}.left-menu{display: flex;margin: 0;padding: 0;}.left-menu li {list-style: none;}.left-menu li a{text-decoration: none;color: inherit;display: block;padding: 5px 20px;}.dropdown{position: relative;}.sub-menu{position: absolute;white-space: nowrap;right: 0;box-shadow: 0px 8px 16px 0px var(--tertiary);border-radius: 5px;opacity: 0;}.sub-menu2{position: absolute;white-space: nowrap;right: -.9em;box-shadow: 0px 8px 16px 0px var(--tertiary);border-radius: 5px;opacity: 0;}.left-menu>li:hover>a, .sub-menu>li:hover>a,.sub-menu2>li:hover>a,.right-menu>span:hover{color: var(--primary);}.left-menu > li:hover>a +.sub-menu,.left-menu > li:hover>a +.sub-menu2 {opacity: 1;}.right-menu>span{cursor: pointer;}.register-btn{border: 1px solid var(--secondary);background: transparent;padding: 0.4em 0.7em;border-radius: 10px;margin-left: 20px;cursor: pointer;}.register-btn:hover{border: 1px solid var(--primary);}
here is the outpout
Make the navbar responsive Using css media queries
now we need to make our navbar responsive so it can adapt to different screen sizes and for that we will use css media queries. On Mobile screen we’ll have a hamburger menu that will show up only on mobile devices with small screen sizes. For this, we’ll have two element.We’ll use input type=”checkbox” and give the label a class=”hamburger”. and some script to add a class to the menu-container whenever we click on the hanburger menu.
<html><body><nav><!-- Logo container --><div class="logo"><h1>Snap</h1></div><!-- hamburger section --><label for="input-hamburger" class="hamburger"></label><input type="checkbox" id="input-hamburger" hidden /><!-- Menu container --><div class="menu-container">...</div></nav></body><!-- javscript part --><script>const hamburger = document.querySelector('.hamburger');const menuContainer = document.querySelector('.menu-container');hamburger.addEventListener('click',function(){hamburger.classList.toggle("close");menuContainer.classList.toggle("open");})</script></html>
Now add this styles to make the navbar responsive for mobile devices using CSS media queries as shown below.
/* Responsive part */@media(max-width:616px){.hamburger{width: 2em;height: 0.25em;display: block;background-color: #000;position: relative;cursor: pointer;z-index: 3;}.hamburger::after, .hamburger::before{content: "";position: absolute;left: 0;background-color: inherit;width: inherit;height: inherit;transition: 0.2s transform ease-in-out;}.hamburger::after{top: 0.6em;}.hamburger::before{bottom: 0.6em;}.hamburger::after{top: 0.6em;}.close::after, .close::before{top: 0;}.close{transform: rotate(45deg);}.close::after{transform: rotate(-90deg);}.menu-container{flex-direction: column;position: fixed;top: 0;right: -300px;background-color: #fff;height: 100%;width: 50%;padding: 0px 10px;transition: 1s right ease-in-out;}.menu-container.open{flex-direction: column;position: fixed;top: 0;right: 0px;background-color: #fff;height: 100%;width: 50%;padding: 0px 10px;}.left-menu > li {margin: 10px 0px;}.left-menu > li:hover>a +.sub-menu,.left-menu > li:hover>a +.sub-menu2{position: relative;}.sub-menu{left: 20px;top: 0;box-shadow: none;}.sub-menu2{left: 20px;top: 0;box-shadow: none;}.right-menu{display: flex;position: relative;top: -20%;flex-direction: column;align-items: center;justify-content: center;}.left-menu{flex-direction: column;}.title{margin-top: 0;white-space: nowrap;}.register-btn{width: 80%;}}
Here’s what we get
. Desktop view
. Mobile view
conclusion
here we are at the end of this tutorial on How to Make a responsive navbar menu with dropdown. I hope this has been useful for you and that you have learned a few new things , so don’t forget, experimentation is the best way to learn don’t hesitate to redo this tutorial yourself step by step to try to understand how the elements are structured and if you are stuck or want more resources to improve your web design skills don’t hesitate to have a look at frontend mentor it’s a fabulous site where you can learn and test your knowledge about frontend development through stimulating challenges.
That’s all I have for you today, if you are a new reader of my articles and if you like my writings, i write about some of my personal projects and i share what i learn about web development. Please make sure you follow me on medium, You can also check out my twitter account
