How to create a responsive navigation menu bar using HTML and CSS?
How do I create a responsive navigation menu bar using HTML and CSS only? It’s actually quite easy, but there are some things to consider. This blog post will cover the following points:
-What is a responsive navigation menu bar? -How can I create one with HTML and CSS only? -Can I have both an HTML/CSS navbar AND a WordPress navbar on my website at the same time or should I just go all-in with one or the other?
The navigation menu bar is one of the most important parts of any website. It’s not only used for navigating between pages, but it also provides an inviting and easy-to-use interface for your users.
There are many different ways you can create a navigation menu bar in HTML and CSS, so we’ll go over the easy and simple methods to help get you started with designing your next website with a beautiful mobile responsive navbar!
Steps to create a responsive navigation bar with HTML and CSS
Now, lets’s briefly describe the points to create a mobile responsive header menu bar in HTML and CSS. These are the topics we are going to discuss in this blog post.
- What is a responsive navigation menu bar
- Write the HTML and CSS code for responsive navbar
- Designing the website’s header section
- Adding the navigation menu to our website’s header section
- Testing the responsiveness of your newly created responsive navigation menu bar
- Making changes in CSS for mobile devices
Moreover, you can also watch the complete video tutorial to make a beautiful mobile responsive navigation menu bar with a logo.
What is a responsive navigation menu bar?
The responsive navigation menu bar is an easy way to keep your customers on the page. A scrollable, vertical menu that adapts and scales based off of device size makes it more accessible than traditional horizontal bars as well!
The code for the navigation menu bar (Source Codes)
To create a mobile responsive navigation menu bar, you need to create an HTML file and CSS file in your code editor. Now, I will provide you the source code of HTML and CSS files for the menu bar.
HTML Code – HTML responsive menu bar code
The HTML code contains a logo at the left hand side, a list of navbar bar menu items with anchor tags, and a login button at the right side in the top bar. The code also includes a checkbox input element with a label tag to create a toggle button for mobile. Copy the following code and paste it inside the HTML file.
<!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="style2.css">
<title>Document</title>
</head>
<body>
<div class="navbar">
<!-- Navbar logo -->
<div class="nav-header">
<div class="nav-logo">
<a href="#">
<img src="logo.png" width="100px" alt="logo">
</a>
</div>
</div>
<!-- responsive navbar toggle button -->
<input type="checkbox" id="nav-check">
<div class="nav-btn">
<label for="nav-check">
<span></span>
<span></span>
<span></span>
</label>
</div>
<!-- Navbar items -->
<div class="nav-links">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Project</a>
<a href="#">Services</a>
<a href="#">Contact</a>
<button class="loginBtn">Login</button>
</div>
</div>
</body>
</html>
CSS Code – Make a responsive navigation bar for mobile
Create a CSS file and paste the following code into the file in your code editor. To make the navigation bar mobile responsive, use CSS media queries. If a user decreases the screen size of browser then horizontal menu bat will convert to a vertical side bar at the right of the screen.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-image: url(background-img.jpg);
background-size: cover;
background-attachment: fixed;
}
.navbar{
height: 70px;
width: 100%;
padding: 14px 30px;
background-color: #1b4cd3;
position: relative;
}
.navbar .nav-header{
display: inline;
}
.navbar .nav-header .nav-logo{
display: inline-block;
margin-top: -7px;
}
.navbar .nav-links{
display: inline;
float: right;
font-size: 18px;
}
.navbar .nav-links .loginBtn{
display: inline-block;
padding: 5px 15px;
margin-left: 20px;
font-size: 17px;
color: rgb(9, 14, 90);
}
.navbar .nav-links a{
padding: 10px 12px;
text-decoration: none;
font-weight: 550;
color: white;
}
/* Hover effects */
.navbar .nav-links a:hover{
background-color: rgba(0, 0, 0, 0.3);
}
/* responsive navbar toggle button */
.navbar #nav-check, .navbar .nav-btn{
display: none;
}
@media (max-width:700px) {
.navbar .nav-btn{
display: inline-block;
position: absolute;
top: 0px;
right: 0px;
}
.navbar .nav-btn label {
display: inline-block;
width: 80px;
height: 70px;
padding: 25px;
}
.navbar .nav-btn label span {
display: block;
height: 10px;
width: 25px;
border-top: 3px solid #eee;
}
.navbar .nav-btn label:hover, .navbar #nav-check:checked ~ .nav-btn label {
background-color: rgb(9, 14, 90);
}
.navbar .nav-links{
position: absolute;
display: block;
text-align: center;
width: 50%;
background-color: rgb(9, 14, 90);
transition: all 0.3s ease-in;
overflow-y: hidden;
top: 70px;
right: 0px;
}
.navbar .nav-links a {
display: block;
}
/* when nav toggle button not checked */
.navbar #nav-check:not(:checked) ~ .nav-links {
height: 0px;
}
/* when nav toggle button is checked */
.navbar #nav-check:checked ~ .nav-links {
height: calc(100vh - 70px);
overflow-y: auto;
}
.navbar .nav-links .loginBtn {
padding: 10px 40px ;
margin: 20px;
font-size: 18px;
font-weight: bold;
color: rgb(9, 14, 90);
}
}
Final Words
Conclusion paragraph: If you want to learn how to create a responsive navbar, please SUBSCRIBE to my YouTube channel. I’ll be teaching all about the HTML and CSS for this design element in future videos. Please let me know any questions or comments that you have!
