Search code examples
htmlcsstwitter-bootstrapvertical-alignmentnav

Change Bootstrap nav links padding without messing alignment up


I need to change the padding of the nav links to make the background of the last link smaller, however, when I do that it messes up the links alignment and they're not centered vertically in the nav anymore. What's causing this and how do I work around it?

HTML

<nav class="navbar navbar-inverse">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
              <img src="img/logo.png" class="navbar-brand" href="index.html">
            </div>
            <div class="collapse navbar-collapse" id="nav">
              <ul class="nav navbar-nav navbar-left">
                <li><span class="fa fa-phone"> +62 202 555 0117</span></li>
              </ul>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Contact us</a></li>
                <li><a href="#" class="nav-button">Get started</a></li>
              </ul>
            </div>
          </div>
        </nav>

CSS

.container {
    width: 1056px;
}
nav.navbar {
    padding: 12px;
    border-radius: 0;
    background: url("../img/nav-bg.png");
}
nav.navbar li {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}
nav.navbar li a {
    padding: 6px 20px;
}
nav.navbar li a:link {
    color: #9faeaf;
}
nav.navbar li a.active:link {
    color: #fff;
}
.nav-button {
    background: #6a7f7f;
}
nav.navbar a.nav-button:link {
    color: #fff;
}
nav.navbar a.nav-button:hover {
    background: #fff;
    color: #366a6b;
}

Solution

  • Fixed it with:

    nav.navbar li a {
         padding: 8px 20px; 
         margin-top: 0.5em;
    }