CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Zach Cook
Zach Cook

Reputation: 614

Dropdown menu on Bootstrap not adjusting to new Navbar Height

I have changed the size of the navbar for my website from 50px to 63px by changing a line in the bootstrap.css file. The code I used to do so is below:

.navbar {
     position: relative;
     min-height: 63px; /* Changing this from 50px to 63px to fit logo **NOTE TO SELF**/
     margin-bottom: 20px;
     border: 1px solid transparent;
}

It works fine. So far, so good.

However, my navbar has a Dropdown on it that is where I am having an issue. When a user clicks on the dropdown it works as expected except that the height that it drops down is incorrect. It drops down only the normal 50px instead of going down 63px.

Here is a picture of the problem:

Picture shoring dropdown problem

Any suggestions on how to fix this? I have searched through the Bootstrap.css file and cannot determine what is causing this or how to fix it.

Upvotes: 3

Views: 3064

Answers (2)

Zach Cook
Zach Cook

Reputation: 614

Ok I solved the problem myself. I had to change the line-height slightly. To do this, alter the bootstrap file to the following:

.navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 40px; /* <<< CHANGE LINE HEIGHT */
 /* your code will probably require a slightly different change to line height,
   basically, line height will need to be about 20-22px less than
   your navbar's height  */
 }

Upvotes: 1

paulalexandru
paulalexandru

Reputation: 9530

When you download bootstrap from the website you can customize it, and there you can change your navbar height from 50px to 63px. Every other function linked to it will change automatically and work fine, including your dropdown.

Here is the url you need: http://getbootstrap.com/customize/#navbar. It's better to generate your bootstrap directly from their website than to edit it locally like you did. It's also not recommended to edit bootstrap.js or bootstrap.css; instead you should override the bootstrap files with your separate files, for example mystyle.css or myscript.js witch you need to load after the bootstrap files.

Upvotes: 1

Related Questions