CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Chris Jones
Chris Jones

Reputation: 415

How to make navbar items a fixed width in Bootstrap 3

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.

Upvotes: 0

Views: 3451

Answers (1)

pablito.aven
pablito.aven

Reputation: 1165

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

Upvotes: 2

Related Questions