A Simple, Responsive HTML Navbar
This is just one example of how to create a simple responsive navbar with a few links. The navbar collapses into a dropdown menu in smaller screen sizes.
First things first, we’ll start with a simple <nav> tag to wrap everything, and inside that we’ll use two sets of <div> tags and give them class names to represent our wide and narrow screen sizes:
Inside our div of class “navWide” we’ll put our links, wrapped in another set of <div> tags with a class of “wideDiv” for lack of creativity:
And finally, we put links inside of our “navNarrow” divs along with a “hamburger” icon (I’m a big fan of Font Awesome). The hamburger will show up as the clickable dropdown menu when it’s all done.
We’ll use the class names of “narrowLinks” and “hidden” later. That’s it for the HTML.
For our CSS, we’re going to start by giving our <nav> a few things:
overflow: hidden will keep everything where we want it when our navbar shrinks down, and padding throws in a little space around the edges.
We also want to give our “navWide” a few things as well. margin: 0 auto will center the links horizontally in the navbar, and display: none makes them disappear on smaller screens.
Our “wideDiv” also gets a text-align: center to center the links perfectly in the middle:
Our links in the wide nav are given a display: inline-block to make sure they show up how we want them, and a padding to separate them from each other:
Here’s where a bunch of our code comes in to make the dropdown work. I want the dropdown icon to show up on the left side of the screen, so I’ll just give it a quick float: left:
And hide the div that wraps our narrow-screen links so they don’t show up until the icon is clicked:
For the dropdown links themselves, to make them show up as a vertical list underneath the hamburger icon, we float them to the left and also set them to display: block and clear: left so they stack on top of each other. A little padding is added to separate them a bit:
Last thing in our CSS is to set a breakpoint to tell our code when to show the hamburger dropdown and when to just show the links:
At 480px screen width, the hamburger dropdown code goes away, and the wide links show up.
The last thing we need is to make our dropdown menu show up when the hamburger icon is clicked. It doesn’t take much code to do this.
We simply need to grab our “navNarrow” and “narrowLinks” classes:
And listen for a click event on the “navNarrow” class, which will trigger a function called “toggle”:
Finally, the “toggle” function will trigger the dropdown menu to show up or not by adding or removing the “hidden” class:
That’s it! For a working CodePen will a little more styling added in, click here.
There’s a lot more you could add to something like this, such as how the dropdown menu slides in or out, changing the dropdown to be on the right side of the screen, etc.