Responsive Navigation Bar with mobile menu using HTML & CSS
Any website on the web should be responsive in the modern web era. One of the must-do task is to create a navigation bar which is usable on both huge 4K monitors and small mobile devices. And this is exatly what we’ll create in this tutorial.
Video tutorial
If you prefer to watch a a step-by-step, beginner friendly video instead, you can check out the video that I made on my YouTube channel:
Implementing the HTML
The HTMl markup will be really simple and will consist of two separate sections. We’ll first create the markup that will be used for the desktop version, and after that we will implement the markup required for the mobile menu.
HTML markup for the desktop version
We wrap everything inside of header tags, and it will make our site more accessible as it helps screen readers. Inside the header we’ll place a logo. For the sake of this example this will be a simple text wrapped inside an a tag, which navigates to the homepage. Below the brand div, we will have a nav wrapper. It also helps screen readers to understand the page. Inside our nav we’ll have an unordered list, which will hold all of our navigation links. Every navigation link will have the same basic structure. Each of them will be a list item ( li ), and inside that we will have an a tag which links to separate pages. I’ll also give an id to the login and signup navigation for further styling.
HTML markup for the mobile version
At small screen sizes, we will use a hamburger menu to toggle the navigation menu. For the hamburger icon you can use any external icon libraries, like FontAwesome, but in this tutorial, I’ll create my own hamburger icon using HTML and CSS.
The hamburger icon 🍔
The html structure of the icon will be really simple. First we’ll add a container div with the id of hamburger-icon . We will use this wrapper div to style and positions the bars inside the hamburger icon. We’ll also add an onclick event handler, which will toggle our mobile menu. We’ll implement this later in javascript. Inside our container we’ll add three divs. They have separate classnames, and we’ll use those for makeing our micro animation which will fade away the middle bar and form an X from the bottom and top one.
In CSS, we’ll center the icon vertically using margin: auto 0 , and hide it by default using display: none . We’ll make it visible through a media query if the screen is less than 600px wide. (You can also do it in a mobile first approach and show it by default and hide it if the screen is wider than 600px). We’Ll give the divs inside the wrapper a fixed width and height and give them a little vertical spacing with margin. When the mobile menu is open ( open class is added to the mobile menu), we’ll rotate the first bar by -45 degrees and adjust it with translate. We’ll hide the second bar by setting the opacity to zero, and we’ll also do the same transformations to the last element as we did for the first, but in the opposite direction.
Below the bars that we created for the hamburger icon in the previous section, we’ll add the same navigation menu that we had in the desktop HTML markup section. The only important difference is that the unordered list has a class mobile-menu . We will use this class to apply all the mobile related styles.
Finishing up the HTML.
rel="stylesheet"href="styles.css"/>
Implement the CSS part
First I’ll import a Google font called Poppins, then reset every browser default margins and paddings and also set the box-siting to border-box. Then for the body we’ll set out brand new font and set a dark background and white text color.
Next we’ll focus on the header wrapper and the logo. We’ll remove all text decoration (underline) from any links inside the header. For the header we’ll set a little bit of left and right padding, give it a dark background color, and a fixed height. We’ll also set the display to flex, and to have the logo on the right and the navigation links on the left we’ll add justify-content: space-between; . For the brand, we’ll set the desired font size and weight, and also center it vertically using flexbox.
Regarding the navigation links we’ll remove any bullet points from the list, make the container full width and center it vertically using flexbox. We’ll set a white color for the links and add some spacing using paddings and margins to the list items. I’ll also add a hover effect to scale the links up a bit when they are hovered.
The login and signup links will have a different button-like styling. We’ll give them more spacing and round borders and use blue and red colors to differentiate them from the other links.
Now it’s time to implement the styles for the mobile menu. By default the menu will be hidden so we’ll apply display: none; . We’ll position the mobile menu absolutely, and place it right below the header, to do that we have to set a top offset of 50px, as it is the fixed height of the header. We want the mobile menu to take the full remaning space of the site (besides the header), so will make it full width, and we’ll set the high to be 100% and substract the height of the header from it.
When the mobile menu is open, we want to display it, and we’ll use flexbox to overrode the display:none . We’ll use flex-direction column to stack the links below each other, center them horizontally and make them start from the beginning of the flex container. We’ll also add a little bottom margin to the links to amke them a little space to breath.
Lastly we have to add the media query to hide the desktop menu, when we are on mobile size and display the hamburger icon when we are on mobile screen size. I’ll use 600px as the breakpoint for mobile.
We will have one lonely javascript function in our index.js file that will toggle the mobile menu between open and closed states. We already added this event handler in the HTML section. We will use the reference that we passed from the HTML and modify its classList using it. The toggle function will check wether the provided class is present on the element and if it is then it will remove it and if it’s not then it will add it.
Learn how to create a top navigation menu for smartphones / tablets with CSS and JavaScript.
Mobile Navigation Bar
Vertical (recommended):
Create A Mobile Navigation Menu
Step 1) Add HTML:
Example
Step 2) Add CSS:
Example
/* Style the navigation menu */ .topnav overflow: hidden; background-color: #333; position: relative; >
/* Hide the links inside the navigation menu (except for logo/home) */ .topnav #myLinks display: none; >
/* Style navigation menu links */ .topnav a color: white; padding: 14px 16px; text-decoration: none; font-size: 17px; display: block; >
/* Style the hamburger menu */ .topnav a.icon background: black; display: block; position: absolute; right: 0; top: 0; >
/* Add a grey background color on mouse-over */ .topnav a:hover background-color: #ddd; color: black; >
/* Style the active link (or home/logo) */ .active background-color: #04AA6D; color: white; >
Step 3) Add JavaScript:
Example
/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */ function myFunction() var x = document.getElementById(«myLinks»); if (x.style.display === «block») x.style.display = «none»; > else x.style.display = «block»; > >
Tip: To create a responsive navigation bar, that works on all devices, read our How To — Responsive Top Navigation tutorial.
Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.
