Question

At the moment I am building my first responsive site with Twitter Bootstrap and I am running into an issue I can’t solve by myself.

I am customizing the media queries, but when it comes to the links inside the navbar I am stuck.
I want .brand to be centered and the navigation links should be centered below – a new line for each link. I managed to center .brand using this CSS code in the appropriate media query:

.brand {
    display: block;
    width: 100%;
    text-align: center;
}

Now for the links. This is the code:

.navbar li a {
    display: block;
}

The selector seems right because when I assign a background color, it shows up. But using display: block; does not result in a new row for each link. Using width: 100%; also does not result in the desired form.

My guess is that it has something to do with the li each link is wrapped in.

<div class="navbar">
    <div class="navbar-inner">
        <a class="brand" href="#">Thomas Glaser</a>
            <ul class="nav">
                <li><a href="#">Arbeiten</a></li>
                <li><a href="#about">Thomas</a></li>
                <li><a href="#contact">Kontakt</a></li>
            </ul>
    </div><!-- /.navbar-inner -->
</div>

I tried to fiddle around with the CSS, but using a trial & error method in combination with such large CSS files is not really recommended I guess, that’s why I am asking you: What CSS code is needed, to display the links inside the navbar one below the other?

Answer 1

It’s actually pretty straightforward, all you need are the following css rules:

.navbar .nav {
    width: 100%;
}

.navbar .nav > li {
    float: none;
    text-align: center;
}

So you were right, it’s the li that needs to be styled, not the anchor 🙂