CODEWITHSUNDEEP
csstwittertwitter-bootstrapcentering
SNaRe
SNaRe

Reputation: 2067

Centering Navbar Content when it is not fixed with Twitter Bootstrap?

I'm trying to center the "content" on navbar. When it is "navbar-fixed-top" the UL menus are centered. However, since I don't want to fix the menu to the top I remove that class but now menus are not centered. It is floating to the left side. It should be aligned to the margins of the container. Similar as http://twitter.github.com/bootstrap/scaffolding.html but I don't want it to be fixed to the top.

enter image description here

This is the code

        <div class="navbar ">
            <div class="navbar-inner">
                <div class="container" >
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <a class="brand" href="#">Project name</a>
                    <div class="nav-collapse">
                        <ul class="nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#about">About</a></li>
                            <li><a href="#contact">Contact</a></li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>

Upvotes: 3

Views: 3773

Answers (2)

juanmirocks
juanmirocks

Reputation: 6191

Use navbar-static-top.

Check out the latest bootstrap version if it doesn't work.

Upvotes: 6

Roger Ertesvag
Roger Ertesvag

Reputation: 1794

This used to be the default behaviour, at least it worked in 2.0.1, but it seems there has been some changes in the latest versions so that the navbar content is no longer centered when the navbar is not fixed.

The workaround seems to be to add the following to your CSS:

.navbar-inner > .container { width:940px; }

Upvotes: 3

Related Questions