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

CSS

Konrad Pilch
Konrad Pilch
2,435 Points
Posted by Konrad Pilch
Konrad Pilch
2,435 Points

BOOTSTRAP 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
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

You 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;
}
Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

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

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

The 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
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

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