Skip to content Skip to sidebar Skip to footer
Home / Css / Glyphicons / Html / Twitter Bootstrap

How Do I Get Glyphicon In The Center Of The Bootstrap Navbar?

Post a Comment
i am trying to get the glyphicon-log-in in the center of the bootstrap navbar and not even getting into the navbar mean it is showing above the navbar, when debugging.

Solution 1:

From your linked bootsnipp, you only have to replace the word "brand" with your glyphicon span. 

<div class="navbar-brand navbar-brand-centered"><span class="glyphicon glyphicon-log-in" id="logIcon"></span></div>

Here's the code in a working fiddle: http://www.bootply.com/EmzUMHPXqd


Solution 2:

http://www.bootply.com/eHiWDODA83

You could create a new class for the icon like this..

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

And then use markup like this..

<nav class="navbar" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <a class="navbar-center navbar-text" href="#"><span class="glyphicon glyphicon-log-in" id="logIcon"></span></a>
  <div class="navbar-collapse collapse">
    <a class="navbar-brand" href="/"><img src="images/logo.png" alt="Elunika"></a>

    <ul class="nav navbar-nav navbar-right">
      <li class="active">
        <a href="#">HOME</a>
      </li>
      <li>
        <a href="#">ABOUT</a>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> WHO, HOW &amp; WHAT? </a>

        <ul class="dropdown-menu">
          <li>
            <a href="#">WHO WE ARE?</a>
          </li>

          <li>
            <a href="#">WHAT IS IT?</a>
          </li>

          <li>
            <a href="#">HOW IT WORKS?</a>
          </li>

        </ul>
      </li>
      <li>
        <a href="#">CONTACT US</a>
      </li>
    </ul>
  </div>
</nav>

http://www.bootply.com/eHiWDODA83


You may like these posts

Post a Comment for "How Do I Get Glyphicon In The Center Of The Bootstrap Navbar?"