Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Create a Responsive Navigation Bar Using HTML and CSS
Hey all new web developers: this guide will teach you how to make your own responsive navbars using only HTML and CSS! However, before you begin creating a responsive navigation bar using HTML and CSS, you must first understand the essential design principles of a responsive navbar. A responsive navigation bar (navbar) is required for bettering your user experience and internet design skills.
You’ve arrived at the right place, especially if you’re new to front-end development and want to construct a responsive menu bar. This is How to Create a Responsive Navigation Bar Using HTML and CSS, without any JavaScript required.
Responsive Navigation Bar Using HTML and CSS
Prerequisites: The Three Important Parts of a Responsive Navigation Bar
It comes without saying that the majority of website owners need to attract fresh visitors. The first stage is to provide visitors with a straightforward and unmistakable path. You should create a navigation bar that both excites and attracts visitors. When creating a perfect HTML navbar, three main features should be considered:
1. Straightforward
It should be simple to read and understand. Rather than overloading the navigation bar using links to every page, focus on your site’s primary sections. If necessary, you may then add sub-menus as a dropdown.
2. Noticeable
A simple responsive menu bar should not be repetitive. To make the layout more uniform, stick to a pre-determined brand color. You can play around with colors and highlight and select options with lighter or darker colors.
3. Responsive
According to Statista’s worldwide internet usage study, 59.5 percent of the world’s population is regularly using the internet, with 92.6 percent using mobile devices. That should be enough to persuade you of the need of including a responsive mobile menu on your website.
Top-tier mobile navigation has become extremely popular. A hamburger-style menu, guillotine, floating icons, and tabs are all options. When you have at least five groups with multiple structures, it comes in handy. Top-level navigation can save a lot of display space, particularly for a site with a lot of information.
Because they often make up between three and five menus at the same structure level, tab bars that have appropriate icons fit neatly at the bottom navigation bar. Sub-menus and sequence menus follow the parent-child connection of the main category.
If you are fresh to the field of web design, it is always a good idea to study some important, responsive website design concepts for more details.
Constructing a Responsive Navigation Bar Using a Hamburger Menu
Now that you understand the design concepts, it’s time to start creating your own flexible navbar menu. There are many CSS abilities available for creating responsive web pages. This post, on the other hand, will show you how to build a responsive navigational menu from scratch using CSS Flexbox and Media Queries.
So, how will the CSS for your navbar appear? It will have top-level navigation that includes:
- Logo
- Navigation Menus
- Dropdown Menu
- Hamburger Menu (hacked with a checkbox)
Coding Section
How to Start with HTML
<!DOCTYPE html>The option to choose from will be available within the service’s (main) menu. When creating a desktop navbar, you may skip using the hamburger menu.
<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="style.css" />
<title>Document</title>
</head>
<body>
<!-- Responsive Navigation Bar Using HTML and CSS -->
<nav class="navbar">
<!-- LOGO -->
<div class="logo">LOGO</div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class="menu">
<li><a href="/">Home</a></li>
<li><a href="/">About</a></li>
<li class="services">
<a href="/">Services</a>
<!-- DROPDOWN MENU -->
<ul class="dropdown">
<li><a href="/">Dropdown 1 </a></li>
<li><a href="/">Dropdown 2</a></li>
<li><a href="/">Dropdown 2</a></li>
<li><a href="/">Dropdown 3</a></li>
<li><a href="/">Dropdown 4</a></li>
</ul>
</li>
<li><a href="/">Pricing</a></li>
<li><a href="/">Contact</a></li>
</div>
</ul>
</nav>
</body>
</html>
The building process of your HTML navbar has become complete. Here is an example of the output:
Utilities for Using Basic CSS
Begin by setting up some simple styles for CSS to reset default settings and make styling the navbar easier:
/* Styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: cursive;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
CSS Flexbox for Navbar Styling
CSS Flexbox can be used to apply hover effects for highlighting. The Service menu requires special care since you must specify display: none; for regular usage and display: block; when an individual hovers over it.
<!-- Responsive Navigation Bar Using HTML and CSS -->
/* NAVBAR STYLING STARTS */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background-color: #004aad;
color: #fff;
}
.nav-links a {
color: #fff;
}
/* LOGO */
.logo {
font-size: 32px;
}
/* NAVBAR MENU */
.menu {
display: flex;
gap: 1em;
font-size: 18px;
}
.menu li:hover {
background-color: #004aad;
border-radius: 5px;
transition: 0.3s ease;
}
menu li {
padding: 5px 14px;
}
/* DROPDOWN MENU */
.services {
position: relative;
}
.dropdown {
background-color: #004aad;
padding: 1em 0;
position: absolute;
/*WITH RESPECT TO PARENT*/
display: none;
border-radius: 8px;
top: 35px;
}
.dropdown li + li {
margin-top: 10px;
}
.dropdown li {
padding: 0.5em 1em;
width: 8em;
text-align: center;
}
.dropdown li:hover {
background-color: #4c9e9e;
}
.services:hover .dropdown {
display: block;
}
This CSS produces a navbar that looks like this:
Navbar Responsive Making Use of CSS Media Queries
When you enter this code, you’ll be presented with a hamburger option that only appears on handheld devices with smaller display sizes. You’ll need two children of ul class=”nav-links”> for this. First, apply input type=”checkbox” and class=”hamburger” for the label. Secondly, give the navigation menu the class=”menu” attribute.
It is worth noting that ☰ is a particular HTML element that shows the character, which represents a hamburger icon.
<body>
<!-- Responsive Navigation Bar Using HTML and CSS -->
<nav class="navbar">
<!-- LOGO -->
<div class="logo">LOGO</div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class="menu">...</div>
</ul>
</nav>
</body>
The concept behind utilizing the checkbox item is that when unchecked, it has display: none; when verified, it changes the CSS attribute of the global parent selector () to display: block; In simple terms, you’re utilizing the checkbox to change the increased and hidden versions of the hamburgers and navigation menus.
CSS media queries are used for styling the CSS navbar on mobile devices, as demonstrated below. You may also use CSS grid or JS for the smartphone menu in this situation.
<!-- Responsive Navigation Bar Using HTML and CSS -->
/* RESPONSIVE NAVBAR MENU STARTS */
/* CHECKBOX HACK */
input[type="checkbox"] {
display: none;
}
/* HAMBURGER MENU */
.hamburger {
display: none;
font-size: 24px;
user-select: none;
}
/* APPLYING MEDIA QUERIES */
@media (max-width: 768px) {
.menu {
display: none;
position: absolute;
background-color: #004aad;
right: 0;
left: 0;
text-align: center;
padding: 16px 0;
}
.menu li:hover {
display: inline-block;
background-color: #004aad;
transition: 0.3s ease;
}
.menu li + li {
margin-top: 12px;
}
input[type="checkbox"]:checked ~ .menu {
display: block;
}
.hamburger {
display: block;
}
.dropdown {
left: 50%;
top: 30px;
transform: translateX(35%);
}
.dropdown li:hover {
background-color: #004aad;
}
}
Here’s how your design will appear in a desktop browser:
And right here is how this will appear on mobile devices:
Trying is the most effective way to create the perfect navigation bar.
Effective website navigation has an important effect on the number of bounces and the rate of conversion. Basically, your website’s first fold must have a defined setting, structured navigation, and an appeal to action.
Your website’s navigation structure should allow visitors to reach popular or rising pages in three clicks or less. So, continue investigating and improving site navigation!
