Reputation: 186

How do I get full-height bootstrap nav buttons?

The default bootstrap nav does this when the screen is too small:

The gap beneath the 'Hotels' button shouldn't be there when I hover over the link, it's caused by the 'Private Hire' text being too long and pushing the nav down a bit.

Is there any way to get the white background to take up the full height of the nav?

Upvotes: 0

Answers (2)

Tom Brennan

Reputation: 28

I have been looking into the twitter bootstrap navbar and i found a way to get rid of that whitespace.

Quite simple....

.navbar-nav{
    white-space: nowrap;
}

@media (min-width: 1200px){
    .navbar-nav {
        font-size: 22px;
    }
}
@media (min-width: 994px) and (max-width: 1199px){
    .navbar-nav {
        font-size: 17px;
    }
}
@media (max-width: 994px){
    .navbar-nav {
        font-size: 15px;
    }
}

Upvotes: 1

dns_nx

Reputation: 3943

UPDATE 2:

Now I've got it. Please check this css code:

<style> a {     color: #fff; }

.navbar {
    background-color: #122B41 !important;
    color: #fff;
                height:100px; }

.navbar > div { height:100% !important; }

.navbar > div > div { height:100% !important; }

.navbar > div > div > ul { height:100% !important; } 

.navbar > div > div > ul > li { height:100% !important; } 

.navbar > div > div > ul > li > a { height:100% !important; } 

.navbar-collapse.collapse {     height:100% !important; } </style>

As I wrote in my UPDATE 1 statement, it's based on the default example of the bootstrap navbar. Does this solve your problem?

UPDATE 1:

I've created a blank page, just with the default navbar example from the bootstrap page. I've just added some color via css (see style area) for better color display of the navbar. Here is the code of my default page:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<link rel="stylesheet" href="bootstrap.min.css"></link>
<link rel="stylesheet" href="bootstrap-theme.min.css"></link>
<link rel="stylesheet" href="bootstrap-theme.min.css.map"></link>
<style>
a {
    color: #fff;
}

.navbar {
    background-color: #122B41 !important;
    color: #fff;
}
</style>
<script type="text/javascript" src="jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="npm.js"></script>
</head>
<body>
<nav class="navbar navbar-primary">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <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>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
</body>
</html>

I'm wondering, because the default navbar, has exactly the desired "full-height". Please see my screenshot:

Maybe you provide the code of your navbar and additional css of your page?

ORIGINAL:

You can set the line-height property of the link accordingly to the height of your navbar via css.

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

Upvotes: 0

How do I get full-height bootstrap nav buttons?

Answers (2)

Related Questions