Question

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>

Answer 1

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/