CODEWITHSUNDEEP
csstwitter-bootstrap
Harry M
Harry M

Reputation: 2088

How to make twitter bootstrap navbar with automatically adjusted width?

Is there a way to make a twitter bootstrap navbar only as wide the menu items that are shown on it? My navbar has only 4 items by default, and 5 when the user is logged in, but the navbar is way too wide. I've tried changing the span, but that messes up the alignment and the navbar is no longer properly centralized. Could anyone help? Thanks!

Alternatively, I would also appreciate it if I somebody could help me just make the navbar fixed width, but without misaligning it and keeping it centralized.

This is my code for navbar:

            <div id="top" class="container">
        <div class="navbar">
            <div class="navbar-inner">
                <ul class="nav">
                    <li><a href="index.php">Home</a></li>
                    <li><a href="books.php">Used books exchange</a></li>
                    <li><a href="submit.php">Submit a listing</a></li>
                    <li><a href="account.php">My account</a></li>
                    <?php if (!empty($_SESSION["id"]))
            {
            print('<li><a href="logout.php">Log out</a></li>');
            } ?>
                </ul>
            </div>
        </div>

Upvotes: 2

Views: 8727

Answers (2)

hajpoj
hajpoj

Reputation: 13379

If I understand you correctly, i think this is what you are looking for.:

.container {
    text-align: center;
}
.navbar {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

It makes the navbar only as wide as its content, centered, and does reasonably well when you resize it. Here is a Jsfiddle of it: http://jsfiddle.net/hajpoj/9E7QX/

Upvotes: 5

Philipp Hofmann
Philipp Hofmann

Reputation: 3478

You could give it a margin-right;

.navbar {
  margin-right:200px; //whatever px you need
}

Upvotes: 0

Related Questions