Welcome!
In this blog, we will be discussing how you can use CSS, HTML, and JavaScript to add a responsive navbar to your webpage! The method I will be displaying is compatible with all web browsers including mobile ones.
Where Should We Start?
To start, you will want to make sure you have an index.html and a style.css file created. If you do not already have these please create them now. Inside index.html you will want to add the following lines of code to your body:
<nav class="navbar">
<div class="brand-title">Brand Name</div>
<div class="navbar-links">
<ul>
<li><a href="linkhere">Home</a></li>
<li><a href="linkhere">About</a></li>
<li><a href="linkhere">Contact</a></li>
</ul>
</div>
</nav>
What is Next?
The next step in creating a responsive navbar is adding to the style.css file. In style.css we will be adding all code needed to format the navbar to be more presentable to users.
Starting CSS:
The first thing being added to our style.css is a very simple boilerplate that will make formatting the page correctly a simpler process. Let's do that here:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.navbar {
display: flex;
justify-content: space-between;
align-itmes: center;
background-color: dark grey;
color: white
}
After saving the style.css file your document in the browser will render with a dark grey navbar. The navbar will contain the brand name written in white text and the three links we added, Home, About, and Contact.
Styling CSS:
The next step is adding some styling to the elements to make everything render properly for a full-size webpage. Let's break this down step by step:
First, we are setting any element with the class brand-title to have a larger font-size and margin.
.brand-title {
font-size: 1.5rem;
margin: .5rem;
}
Secondly, we set every ul with the class navbar-links to have a display of flex with a margin and padding set to 0.
.navbar-links ul {
margin: 0;
padding: 0;
display: flex;
}
The next step is getting rid of the bullet points and the underlining for links. We do this by setting every li with the class navbar-links to have a list-style of none.
.navbar-links li {
list-style: none;
}
In this last step, we are changing the presentation of the links. This is being done by setting the a of every li that has the class name navbar-links to have no text-decoration, a color set to white, an increase in padding, and a display set to block.
.navbar-links li a {
text-decoration: none;
color: white;
padding: 1rem;
display: block;
}
We can also add some styling to let the user know that Home, About, and Social are links. To do this add:
.navbar-links li:hover {
background-color: light grey;
}
Adding this hover to each li with the class of navbar-links is not required but it will make your webpage more user-friendly! With this function added if a user hovers over a link it will display light grey as the color.
If you have made it to this point congratulate yourself as you have now made a functional navbar for your page! However, do note to make your navbar responsive, the next few steps are required.
Creating the Hamburger?
While food may be the first thought on your mind we are talking about a different hamburger here. The hamburger we are referring to is the icon that when clicked will allow for a dropdown with links to appear.
To incorporate the hamburger we need to add a couple of lines of code to our index.html. We can do this like so:
<nav class="navbar">
<div class="brand-title">Brand Name</div>
////////////////// New Code Here /////////////////
<a href="linkhere" class="toggle-btn">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
////////////////// New Code Here /////////////////
<div class="navbar-links">
<ul>
<li><a href="linkhere">Home</a></li>
<li><a href="linkhere">About</a></li>
<li><a href="linkhere">Contact</a></li>
</ul>
</div>
</nav>
Styling the Hamburger:
Now that we have the base elements needed to create a hamburger we can start adding some CSS to make it more user-friendly. We can do this by first adding styling to our button like so:
.toggle-btn {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 20px;
}
Here we are setting all elements with a class of toggle-btn to have the attributes defined above. The next step is making the bars render for the hamburger. This can be done by adding:
.toggle-btn .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
In this code, we are saying we want every bar class within the toggle-btn class to have a height of 3px, a width that spans the entirety of toggle-btn, white for the backgorund-color, and a border-radies of 10px. This, in turn, renders a hamburger within the toggle-btn of the navbar.
Now we need to make the hamburger replace the links when the page is too small to render all links. To do this we can add:
@media (max-width: 600px) {
.toggle-btn {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links li {
text-align: center;
}
.navbar-links li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
This may be confusing so let's break it down.
First, we are using a media query to set a conditional. The conditional statement we are writing says if the max-width of the page is greater than 600px do nothing, and if it is less than 600px display the hamburger.
The next part is dictating what CSS should be run when the page is less than 600px wide. In our case, we want the toggle-btn class to change the display from none to flex, and change the navbar-links class from flex to none.
Third, we also want to set our ul elements in the class navbar-links to have a width of 100% and the flex-direction to column. For the navbar class, we want to have a flex-direction of column and we want to align-items to flex-start. All this is doing is making the links render below the brand name and stacking them vertically.
Finally, we are centering the links horizontally on the page, removing some padding from the links, and using .active for the class navbar-links to display flex when the hamburger is clicked.
JavaScript for Functionality
Congrats! You have made it through the HTML and CSS and now for the easy part, adding a click event to the hamburger. To start we need to select the class toggle-btn, and the class navbar-links.
const toggleBtn = document.getElementsByClassName('toggle-btn')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
Next, we need to add our event listener. If you are new to .addEventListener you can read my previous blog here for more information.
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
In this code, we are stating on a click of toggleButton we want to access the classList of navbarLinks, and toggle active. If active does not exist this function will create it, and if active does exist this will remove it.
Now when you check the browser you will have a responsive navbar, neat right?
Concluding Thoughts
Hopefully, this helps to give a starting point for building a responsive navbar that is more complex. The possibilities for expanding are endless so have a little fun and be creative. If you attempt to add something and it does not work the first time remember, there is no success without failure so "fail fast and fail often"!