Search code examples
csstwitter-bootstrapalignmentnavbar

Alignment between 2 blocks into a navbar

I am writing a navbar for a website, using Twitter bootstrap. I would like to have the title of the site and the sections of the web site written on the right; so I wrote:

<nav class="navbar navbar-default" role="navigation">

            <div class="navbar-left" >
            <H2 class="navbar-text">DISCOTECA</H2>


                <ul class="nav navbar-nav">
                    <li><a href="#">Composers</a></li>
                    <li><a href="#">Genres</a></li>

                </ul>
            </div>
</nav>

Now this works, but the problem is between the H2 and ul element: Render of the code above

How could I put composers and genres a little more down, in order to center them with the word "discoteca"? Thanks for your help

Solution

  • From what I see in bootstrap css there are two simple CSS one-liners.

    One:

    .nav.navbar-nav {
    margin-top: 7px!important;
}

    Two:

    .navbar-nav li a {
    line-height: 33px;
}

    The first is calculates (manually) margin. The second one is just setting the same line-height DISCOTECA has. The second is nicer I think. Though both are not general.

    UPDATE: http://jsfiddle.net/z3QPd/2/