CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Bartłomiej Szałach
Bartłomiej Szałach

Reputation: 2453

Center left <ul> in Bootstrap's navbar to fit the right one

My navbar looks as follows:

enter image description here

And I'd like to vertically center the left menu to fit the Github icon. I suppose a special class should be added to the left one. Here is the code:

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">

        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">About</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><i class="fa fa-github fa-2x"></i></a></li>
                <!--here will be more icons-->
            </ul>
        </div>

    </div>
</nav>

How do I do this?

Upvotes: 0

Views: 124

Answers (2)

vanburen
vanburen

Reputation: 21663

You can try this as well; the navbar-nav line height is 20px by default so you can apply that to your icons to reduce their default line height(s). (The default line height for font awesome 2x is 28px I believe.)

@media (min-width: 768px) {
  .navbar {
    height: 50px;
  }
  .navbar .navbar-right i {
    line-height: 20px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">About</a>

        </li>
        <li><a href="#">Skills</a>

        </li>
        <li><a href="#">Education</a>

        </li>
        <li><a href="#">Blog</a>

        </li>
        <li><a href="#">Contact</a>

        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><i class="fa fa-github fa-1x"></i></a>

        </li>
        <li><a href="#"><i class="fa fa-github fa-2x"></i></a>

        </li>
        <li><a href="#"><i class="fa fa-github fa-3x"></i></a>

        </li>
        <!--here will be more icons-->
      </ul>
    </div>
  </div>
</nav>

Upvotes: 1

Jackson
Jackson

Reputation: 3518

You can just align the nav items using padding

.navbar-nav a {
    padding: 6px 10px; /*Adjust values to suit*/
}

I would avoid using line-height to fix the alignment as it will cause the links to look strange if the words wrap.

Using padding on the <a> tag allows the area around the link to be clicked (not just the text itself)

Upvotes: 1

Related Questions