Bootstrap 3:Vertically Center Navigation Links When Logo Increasing the Height of Navbar

Bootstrap 3 : Vertically Center Navigation Links when Logo Increasing The Height of Navbar

add this to your stylesheet. line-height should match the height of your logo

.navbar-nav li a {
 line-height: 50px;
}

Check out the fiddle at: http://jsfiddle.net/nD4tW/

Vertical align logo inside .navbar-brand with Bootstrap 3

You could add some custom style and set display: flex and align-items: center on navbar-brand element.

.navbar-brand {

  display: flex;

  align-items: center;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-fixed-top navbar-default" role="navigation">

  <div class="container-fluid">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">

      <span class="icon-bar"></span>

       <span class="icon-bar"></span>

       <span class="icon-bar"></span>

            </button>

      <a class="navbar-brand" href="#">

         Company Name <img src="http://via.placeholder.com/220x36">

      </a>

    </div>

  </div>

</nav>

Bootstrap 4 : Vertically Align Navigation Links when Logo Increases the Navbar Height

I think you can remove top and bottom padding from links and add height and line-height to it. Also remove padding from .navbar-brand.

Just add this CSS:

.navbar-brand {
  padding: 0;
}
.navbar-nav .nav-link {
  padding-top: 0;
  padding-bottom: 0;
  height: 50px;
  line-height: 50px;
}

CODEPEN

Vertically centering nav items in Bootstrap 3

Vertical alignment can be done in a number of ways, as shown in this Stack Overflow question. However, they're fairly situational, meaning there isn't a single approach that can be applied to every case.

For the issue you're facing, I'd suggest the line-height approach, since all of your navigation content is on a single line. Just remove any vertical padding on the elements in questions, and set them to have the same line-height as the desired container height (80px):

.navbar-nav li a {
    padding:0 15px;
    line-height:80px;    
}
.navbar-header a {
    padding:0 15px;
    line-height:80px;    
}

Here's a Bootply to demonstrate. Hope this helps! Let me know if you have any questions.

Alternatively, you can use:

.navbar.isModified a {
    padding:0 15px;
    line-height:80px;    
}

Though you may find this too broad of a CSS selector if you plan on styling other links in your navbar differently.

Note: If you want the mobile version of the menu to look alright, you may need to use media queries to override these styles with more of your own.

How to center navbar elements vertically (Twitter Bootstrap)?

The .brand class uses a different line-height than the base text that is used throughout Bootstrap, as well as a few other key differences.

Relevant parts from the original bootstrap navbar LESS -

For .brand:

.brand {
  // Vertically center the text given $navbarHeight
  @elementHeight: 20px;
  padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2);
  font-size: 20px;
  line-height: 1;
}

For links in the navbar:

.navbar .nav > li > a {
  @elementHeight: 20px;
  padding: ((@navbarHeight - @elementHeight) / 2 - 1) 10px ((@navbarHeight - @elementHeight) / 2 + 1);
  line-height: 19px;
}

You'll probably need to play around with the values of @elementHeight, line-height, and maybe padding for the .navbar .nav > li > a selector to reflect the bigger 60px @navbarHeight (these default values are meant for a 40px @navbarHeight). Maybe try a 40px @elementHeight and/or a 29px line-height to start.

How do I center a Bootstrap nav bar with a brand image inbetween nav links?

To center the floated navbar-nav you can use relative position and negative left, right values on the navbar-nav itself and on the list items or child elements.

To make sure that the logo is always centered you may think about not using a nav-justified but a regular navbar-nav with a fixed value for left and right padding on the anchor tags, but with individual values for different screens.

To get the vertical alignment working just add the appropriate line-height to the anchor tags.

I have decided to hide the actual navbar-brand and only show it on sx breakpoint.
For the centered logo it is the other way around, so we do not have the logo inside the collapsed nav. Just look at the example and i am sure you will get the idea.

Here is the example.

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");

.navbar {

  background-color: #231f20;

  min-height: auto;

  position: relative;

  top: 0px;

  font-size: 13px;

  width: auto;

  border-bottom: none;

  margin-bottom: 0px;

  padding: 40px 0px;

}

.navbar-brand {

  padding: 0 15px;

  height: 96px;

}

@media (min-width: 768px) {

  .navbar-nav {

    position: relative;

    right: -50%;

  }

  .navbar-nav > li {

    position: relative;

    left: -50%;

  }

  .navbar-nav > li a {

    line-height: 126px;

    vertical-align: middle;

    padding: 0 24px;

  } 

}

@media (min-width: 992px) {

  .navbar-nav > li a {

    padding: 0 48px;

  } 

}

@media (min-width: 1200px) {

  .navbar-nav > li a {

    padding: 0 68px;

  } 

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">

    <div class="container-fluid">

        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                <span class="sr-only">Toggle navigation</span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

            <a class="navbar-brand hidden-sm hidden-md hidden-lg" href="#"><img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" /></a>

        </div>

        <div class="collapse navbar-collapse">

            <ul class="nav navbar-nav">

                <li><a href="#">Who We Are</a></li>

                <li><a href="#">Our Food</a></li>

                <li class="hidden-xs"><a href="#"><img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" /></a></li>

                <li><a href="#">Book a Table</a></li>

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

            </ul>

        </div>

    </div>

</nav>

Bootstrap 3 - Make a navbar's links grow vertically with the size of a brand image

You can change the line-height of the navbar links to the height of your image.

.navbar-nav > li > a {
    line-height:100px;
}

Example custom navbar with image: http://bootply.com/108341

Bootstrap navbar links and nav brand centered

Is this what you wanted?

@media (min-width: 768px) {

  .navbar-nav.navbar-center, .navbar-header-center {

    margin-left: 50%;

    transform: translateX(-50%);

  }

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <nav class="navbar navbar-default" role="navigation">

      <div class="navbar-header navbar-header-center">

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

        <a class="navbar-brand" href="#">Brand</a>

      </div>

      <div class="clearfix"></div>

      <div class="navbar-collapse collapse">

        <ul class="nav navbar-nav navbar-center">

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

           <li><a href="#about">Left</a></li>

          <li><a href="#about">Right</a></li>

          <li><a href="#contact">Right</a></li>

        </ul>

      </div>

    </nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

---

Related Topics