How to adjust navbar to a fixed width in Twitter Bootstrap?


Tags: css,twitter-bootstrap

Problem :

Default navbar spans horizontally across the browser window.

<div class="navbar navbar-static-top">

How do you declare the navbar to be only 750px width and placed at the center?
Setting margin:auto; in the CSS doesn't work.



Solution :

The .navbar-static-top you are using forces your navbar to become full-width. Remove that class and you will get a resizable navbar. Then, you can wrap it in a span# of the size you want:

<div class="container">
    <div class="row">
        <div class="span6 offset3">
            <div class="navbar">
                ...
            </div>
        </div>
    </div>
</div>

Here you have an example: http://jsfiddle.net/simbirsk/xAMYF/


    CSS Howto..

    jQuery - Navbar hover did not show

    How to dynamically change pseudo-class value in css

    How to make a HTML5 spinning list/rotating wheel selector/picker

    How to make div size bigger?

    How to Make Text Stay Inside Div?

    How to explain using browser.sleep in protractor

    How to make more divs appear when hovering over one div?

    HTML, CSS: how can I merge these divs in order to use float:left property on their children?

    Bootstrap - How to make text wrap around an image on small devices?

    how i center div elements horizontally in css?

    How do i add my own image to a button that links to another website in HTML & CSS?

    CSS: How to build a vertical separator with margin on its top and bottom? [closed]

    How to force my text to not break into lines in css?

    how to insert a ribbon inside a div how background without images only pure css? [closed]

    How do I access HTML elements created by a function? The elements are “undefined” and therefore not CSS apply-able

    How to best make a hover navbar?

    How to do letter spacing every two letters with CSS only?

    How to develop Desktop Apps using HTML/CSS/JavaScript? [closed]

    How do I add a margin between bootstrap columns without wrapping

    how can I apply a CSS stylesheet to all page views in my Firefox browser

    css: show all floating text (variable font size) on the baseline

    CSS Overflow: overlay. Is it deprecated? How can I replace it?

    How to turn off element CSS background when dragged

    how to add bootstrap, css, images ,js into google app engine?

    How to position the element using absolute position?

    How to load .css file from parent directory with .htaccess rule?

    How do I add a custom CSS image to the target background behind a given layer of text in Squarespace?

    How to build dynamic css main/sub menu's (or do I need jquery)?

    How to reload or rerender CSS for a single HTML element? [duplicate]

    why is my css speech bubble displaced so frequently? How can I prevent this?