Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial![](https://ecs-static.teamtreehouse.com/assets/views/marketing/shared/community-banner-white-47072046c51352fe6a69f5e691ff5700b28bb11d45197d7bdf066d9ea3f72d0c.webp)
![Konrad Pilch](https://uploads.teamtreehouse.com/production/profile-photos/2703362/micro_tiger.jpg)
Konrad Pilch
2,435 PointsBOOTSTRAP Line height navbar
I want to my navbar be ok 100px , and whats inside to have line-height but so its in the middle. But i cant target the line-height and nothing moves in the middle verticaly . Heres my code:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="container">
<!-- Mobile Display -->
<div class="navbar-header">
<a href="" class="navbar-brand">ASDASADS</a>
</div><!-- /navbar-header -->
<!-- Links -->
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav pull-right">
<li>
<a href="">Home</a>
</li>
<li>
<a href="">About</a>
</li>
<li>
<a href="">Services</a>
</li>
<li>
<a href="">My Work</a>
</li>
<li>
<a href="">Blog</a>
</li>
<li>
<a href="">Contact</a>
</li>
</ul>
</div><!-- /navbar-1 -->
</div><!-- /container -->
</div><!-- /container-fluid-->
</nav>
CSS:
.navbar .nav{
height: 76px; /* This wokrs */
line-height: 76px; /* Doesnt work */
}
2 Answers
![Colin Marshall](https://uploads.teamtreehouse.com/production/profile-photos/44669/micro_CMM-Avatar-no-bg.png)
Colin Marshall
32,861 PointsYou have to target different elements from what you have. You also must set the top padding to 0px. Change your CSS to this:
.navbar-brand,
.navbar-nav li a {
height: 76px;
line-height: 76px;
padding-top: 0;
}
![Ryan Field](https://uploads.teamtreehouse.com/production/profile-photos/2892162/micro_ryan3.jpg)
Ryan Field
Courses Plus Student 21,242 PointsThe preferred way of using line-height is with a unitless number, according to MDN, as other types can cause odd inheritance issues. You might want to try removing the 'px' unit and see if that changes anything.
![Konrad Pilch](https://uploads.teamtreehouse.com/production/profile-photos/2703362/micro_tiger.jpg)
Konrad Pilch
2,435 PointsIt has no effects whats so ever whatever i do . But also strangely , not even the text color is changing and im thinking , is this coz im working on MAMP server? and it lags or something?
Konrad Pilch
2,435 PointsKonrad Pilch
2,435 PointsOh wow xd i had in mind , as looking in dev tools, that this nav is in one div that controls it line-height. I was wrong. I did before the brand and li alone it worked xd but why didnt i put it like you xd
Thank you very much. ( maybe coz i sat too much in it : p).
Thank you all ^^