Navbar With Logo Using HTML and CSS
Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create An Navbar With a Logo Using HTML and CSS.
What is Navbar?
navbar is the most common use word in websites when you visit a website you see there’s a menu in the website header that’s called a menu, navigation bar, or navbar in coding.
What is the Use of Navbar on the website?
in website we can say if theres anything important and thats navbar because when user visit website they want to navigate on your other pages.
navbar contain website important pages like contact us,about us or any seasonal link like best offer or best deals so hope you understand value of navbar in website.
So let’s begin by adding the source codes to our project. We are initially using HTML code.
50+ HTML, CSS & JavaScript Projects With Source Code
HTML Code For Navbar With Logo
We must include important links inside the website’s head section before building the navbar’s layout. now we link the Css file to html main file because we use an external Css file and we link the CDN Of Css Framework Bootstrap in 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="style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>navbar</title>
</head>
<nav class="navbar navbar-inverse " role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href="#">Brand</a>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.navbar-container -->
</nav>
<div class="row">
<div class="container">
<div class="col-md-12">
<h2>Navbar Centered Logo</h2>
</div>
</div>
</div>First, we create a nav tag and give the class name navbar navbar-inverse. we create some div with another class name.
Portfolio Website Using HTML ,CSS ,Bootstrap and JavaScript
Now we have added the navigation links to the menu bar for mobile responsiveness, and they were added with HTML properties like button class for menu bar click, span class for menu bar representation, etc., and then we have closed the div tag.
The codes are given below for the above explanation.
<nav class="navbar navbar-inverse " role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
In this step, we add the links for nav bars using anchor tags and an unordered list class that contains separate class names.
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
The main part is that we are adding the name “BRAND,” which here refers to the logo. and that is added with the anchor tag. Then we closed all the div and nav tags.
Now the code is down for the explanation.
<a class="navbar-brand" href="#">Brand</a>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.navbar-container -->
</nav>The class names have been added as bootstrap class names because it is bootstrap. Simply run a Google search for the “bootstrap nav bar” and copy the bootstrap link inside the head tag. Then, add the responsive class names that perform collapse.
Restaurant Website Using HTML And CSS With Source Code
ADVERTISEMENT
Right now, all we’re doing is adding the website’s content using the bootstrap div class.
ADVERTISEMENT
ADVERTISEMENT
<div class="row">
<div class="container">
<div class="col-md-12">
<h2>Navbar Centered Logo</h2>
</div>
</div>
</div>ADVERTISEMENT
The specifications for the project to create a navigation bar with a logo have now been added. now time to use CSS to center the logo with the navbar.
ADVERTISEMENT
HTML Output:
CSS Code For Navbar With Logo
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}in this CSS code, we can place our logo with the navbar.
Video Output:
By adding the source codes, we were able to successfully complete the project. As a result, we are going to create a preview of our project in the output area below.
Gym Website Using HTML and CSS Source Code
Final Output Of Navbar With Logo Using CSS
Now We have Successfully created our Navbar With Logo Using HTML and CSS. You can use this project for your personnel needs and the respective lines of code are given in the code pen section above.
What is a navigation bar?
A navigation bar commonly referred to as a navbar, is an essential component of any website since it offers links to the site’s key sections and enables the user to browse the information quickly and easily.
What is the main purpose of the navigation bar?
The purpose of a navigation bar is to make it simpler for website users to navigate. On most websites, the navigation is found on the top bar. The user can easily access information thanks to the navigation bar.
How can I make my navigation bar responsive?
To make a navigation bar responsive, you can use CSS media queries to change the appearance of the navigation bar based on the size of the screen. For example, on smaller screens, you can display the navigation links in a dropdown menu, while on larger screens, you can display the links in a horizontal bar.
WRITTEN BY – Ragunathan S
