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.
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.
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.
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.
Right now, all we're doing is adding the website's content using the bootstrap div class.
<div class="row">
<div class="container">
<div class="col-md-12">
<h2>Navbar Centered Logo</h2>
</div>
</div>
</div>
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.
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.
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.
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.
REFER CODE - Hernan Malubay
WRITTEN BY - Ragunathan S
Top comments (0)