CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
James MV
James MV

Reputation: 8717

How to increase the width of nav without breaking responsiveness?

I'm building with grids for the first time and wanted to stretch the bootstrap nav element to so that the links are wider. I can't quite recreate it in the fiddle exactly:

http://jsfiddle.net/yjyTq/

Basically I want to the nav elements to be a bit larger and the entire nav area to fill the 6 columns specified, but when I over-ride the bootstrap code the nav li elements won't stack up when the browser is narrowed. 

.nav{
    width:100%;
}

.nav-pills>li{
    width:23%;
    font-size:1.1em;
}

Any ideas how I can achieve this without breaking everything?

TIA

Upvotes: 0

Views: 44

Answers (1)

Patrick Allen
Patrick Allen

Reputation: 2168

You can always add padding-left and padding-right to your nav li a elements to increase the size of the li

So this:

.nav-pills>li>a {
    text-align:center;
    padding-left: 50px;
    padding-right: 50px;
}

looks like this: http://jsfiddle.net/yjyTq/1/

Upvotes: 1

Related Questions