How to make navbar items a fixed width in Bootstrap 3

Question

I am trying to produce a Navbar similar to the one on this page :

http://wrapbootstrap.com/preview/WB0375140

I am using Bootstrap 3 and can create the top corner rounded boxes with slight gradient at bottom easy enough.

The thing I am struggling with is that the menu items in the navbar on that example are all the same width regardless of how wide the text in them is.

I am scratching my head trying to find out how that is done - And ideas much appreciated.

Answer 1

You have to add css width property to all elements in the navbar.

Assuming your navbar is something like this:

<div id="myCustomNavbar">
    <ul>
        <li class="active">Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

You should add some style with CSS:

#myCustomNavbar > ul > li
{
    width: 100px !important;
}

Remember you can always right-click the element you are interested in (in the sample webpage), and click Inspect element. There you can see all html markup and CSS styles applicated to that element