Responsive Navigation Menu CSS or Navigation Bar: Friends, there are different types of pages on the website. When all those different pages are neatly arranged in a certain place, that place is called navigation bar, that is, navigation menu bar. For example this menu bar can be about page of website, contact page, any page about website etc.
The navigation menu bar plays a very important role for a user friendly website as this navigation menu bar fully helps the user to use the website. The navigation bar helps the user to move from one page to another. Responsive Navigation Menu CSS.
Also Read: Website Design and Website Development-Full Guideline, Step-1
The navigation menu bar for the website can be created in different ways. But for a user friendly website, the navigation must be such that the menu bar Applies to computers and is compatible with mobile.
When a navigation menu bar is designed to support both computer and mobile, that menu bar is called Responsive Menu Bar. To create this responsive menu bar we need CSS coding. It is never possible to create a responsive menu bar without using CSS coding.
Friends in today’s article we will learn how to create menu bar and also learn how to create responsive menu bar CSS for both mobile and computer. In the first step of website design and development I mentioned where all our code or coding files will be. If you are reading this article today then you must read step-1 first.
How to create Navigation Bar?
We first learned how to create different types of files. We learned how to create HTML files in the first step. Today we will need a CSS file to create the navigation menu bar so we will create a new file and name the file “menubar.css”.
Login Your Web hosting cPanel -> Click File Manager -> Open public_html folder -> Click on +File from menu bar -> Enter file name (menubar.css) -> Click Create New File
New File Create Process
You need to add CSS codes for the menu bar in the CSS file. For this you have to edit the css file. To edit a CSS file, open the CSS file from the public_html folder.
Right click on css file -> Click Edit option -> Again click Edit option -> Then This CSS file editor open new tab.
CSS file Edit Process
Copy and paste the complete CSS code given below into the CSS file. Once the code has been copied and pasted, click on the Save option at the top right of the editor.
body {
margin: 0;
font-family: Times New Roman;
}
.topnavmanu {
overflow: hidden;
background: linear-gradient(to right, #182B6A, #74DDF9, #182B6A);
}
.topnavmanu a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnavmanu a:hover {
background-color: #ddd;
color: black;
}
.topnavmanu a.active {
background-color: #04AA6D;
color: white;
}
.topnavmanu .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnavmanu a:not(:first-child) {display: none;}
.topnavmanu a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnavmanu.responsive {position: relative;}
.topnavmanu.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnavmanu.responsive a {
float: none;
display: block;
text-align: left;
}
}
The following code contains all the navigation menus in our navigation menu bar. This code has HTML we will use it in our index.html file. That’s the way it is. Copy these HTML codes, paste them under the title tag code of the index.html file and “Save“.
<div class="topnavmanu" id="myTopnav">
<a href="" class="active">Home</a>
<a href="">News</a>
<a href="">Contact</a>
<a href="">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
Menu
</a>
</div>This is a JavaScript code. This code plays an important role for our navigation menu bar. Copy and paste this code below the navigation html of the index.html file and Save the index.html file.
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnavmanu") {
x.className += " responsive";
} else {
x.className = "topnavmanu";
}
}
</script>For now the CSS file has been created for the menu bar of our website. Now once we run our website we can see that navigation menu bar Not working properly on our website
. The reason is that we have created a separate CSS file for the menu bar, so we have to connect (associate) this file with our website’s home page, that is, index.html, then we can see the menu bar on our home page.
<!DOCTYPE html>
<html lang="en">
<title>Welcome to Blogging Post</title>
<header>
<link rel="stylesheet" href="menubar.css">
</header>
<div class="topnavmanu" id="myTopnav">
<a href="" class="active">Home</a>
<a href="">News</a>
<a href="">Contact</a>
<a href="">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
Menu
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnavmanu") {
x.className += " responsive";
} else {
x.className = "topnavmanu";
}
}
</script>
<body>
<center>
<h1>This is my first webpage welcome to Blogging Post.com</h1>
</center>
<center>
<font size="6" color="green">Home page working successfully</font>
</center>
</body>
</html>After attaching the CSS file to our home page, that is, to the index.html file, you can run the website and see that the menu bar on our navigation is working properly.
Responsive Navigation Menu CSS?
The word Responsive on the menu bar means, The menu bar will work to match the display size of the computer and it will also work at the right level by matching the display size of the mobile. When our website is open on any mobile.
Also Read: Make IFSC Details Website Using API and PHP – AdSense Earn money
We already know that the menu bar on Responsive Navigation is very important for a user friendly website. We have left out this code because to understand correctly what is Responsive Menu Bar.
How to Create Responsive Navigation Menu?
Here is the code I left behind for our homepage’s Responsive menu bar – mata viewport This code is used to keep each website compatible with the display of any device.
<meta name="viewport" content="width=device-width, initial-scale=1">Now we will add this code to our home page i.e. index.html page and run our website again to see menu bar is working or not on mobile device.
<!DOCTYPE html>
<html lang="en">
<header>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Blogging Post</title>
<link rel="stylesheet" href="menubar.css">
</header>
<div class="topnavmanu" id="myTopnav">
<a href="" class="active">Home</a>
<a href="">News</a>
<a href="">Contact</a>
<a href="">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
Menu
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnavmanu") {
x.className += " responsive";
} else {
x.className = "topnavmanu";
}
}
</script>
<body>
<center>
<h1>This is my first webpage welcome to Blogging Post.com</h1>
</center>
<center>
<font size="6" color="green">Home page working successfully</font>
</center>
</body>
</html>
So we can see the results of our Responsive Navigation menu bar working successfully on mobile devices.
What is the advantage of Responsive Navigation Menu bar?
Responsive navigation menu bar plays a very important role for a beautiful website. If the website is not user friendly then Google never wants to rank the website on their front page.
In addition, when a user comes to your website, if he cannot navigate your website properly, then that user will not come to your website a second time. For all of these reasons, the Responsive Navigation menu bar plays a very important role in making a user friendly website.
When a user is able to navigate your website properly, that is, the user will be attracted to your website and will try to find everything on your website. As a result, your website’s regular traffic will continue to increase and your website’s DA (Domain Authority) and PA (Page Authority) will continue to increase. This will help you to rank your website in Google very quickly.
The last few words
Friends, I hope that through today’s article I have been able to tell you how to create responsive navigation menus for websites using HTML and CSS. In the next steps of this website design and development there we will learn more about new topics and discuss in detail.
I hope you enjoyed today’s article. Please share this article with your family and friends. If you have any queries regarding this article and website design and development, please let us know in the comment box. We will try to resolve your comment as soon as possible.