You are currently viewing Align Logo To Center Of Navigation Bar Html Css

Align Logo To Center Of Navigation Bar Html Css

Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create An Centered Logo In Navbar Using HTML & CSS

Align Logo To Center Of Navigation Bar Html Css

The Logo is a representation of an organization structure or an brand that is located on the top of website. The nav bars are something that represents the whole journey of an organization like their products , services, demonstrated year and their experiences. This will give an basic experience of web development in which it is mandatory in every website.

So,  Let’s Begin Our Pulsating Circle Project By Adding The Source Codes. For That, First, We Are Using The Html Code.

HTML CODE For Centered Logo

<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>

 

Here First we creating an nav tag with class name navbar navbar-inverse and inside of it again adding an div with a separate class name.

100+ Front-end Projects for Web developers (Source Code)

Now we have adding the navigation links with menu bar for mobile responsive 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 Code were given below for 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 adding the links for nav bars using anchor tag(a) and with an un ordered list class that contains separate class names.

The Main part is we are adding an name “BRAND” which is here refers to the logo. and that is added with anchor tag. Then We closing 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>

 

Since it is bootstrap the class name have been added with bootstrap class names.  Simply we just search bootstrap nav bar in google and copy the link of bootstrap inside head tag then add the class names that performs collapse which is responsive.

Now we just adding the content for an website using bootstrap div class.

<div class="row">
  <div class="container">
    <div class="col-md-12">
      <h2>Navbar Centered Logo</h2>
    </div>
  </div>
</div>

 

Now We have completed adding the requirements that needed for an nav bar with logo project. But here there is one more step left which is centering the logo in the navigation bar and that is gonna done with the help of CSS.

 

CSS Code For Centered Logo In Navbar

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
}

 

By adding this CSS code we just make our logo to appear in the center of an webpage. Here we just simply calling out the div class that contains the logo and adding the width , top , left , text-align and margin for making out the logo to be center.

And So we have successfully completed the project by adding the source codes and now we gonna make the preview of our project in the below output section.

 

Final Output Centered Logo In Navbar

Now We have Successfully created our Centered Logo In Navbar Using HTML & CSS. You can use this project for your personnel needs and the respective lines of code are given with the code pen section above.

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

 

REFER CODE – Hernan Malubay

WRITTEN BY – Ragunathan S

 

Leave a Reply