Vishal Suri February 2016

How can I change bootstrap menu width?

How can I change bootstrap menu width without affecting responsiveness? Below is my html:

<div class="page-header col-xs-12">
        <h2>Heading</h2>
    </div>
    <div class="container col-xs-12">
        <div class="row navigation-row">
            <div class="col-xs-2"></div>
            <div class="col-xs-8">
                <nav class="navbar navbar-default" style="background:none;border:0px;">
                    <div class="container-fluid">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
                                    <span class="caret"></span>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Page 1-1</a></li>
                                    <li><a href="#">Page 1-2</a></li>
                                    <li><a href="#">Page 1-3</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Page 2</a></li>
                            <li><a href="#">Page 3</a></li>
                        </ul>
                    </div>
                </nav>
            </div>
            <div class="col-xs-2"></div>
        </div>
</div>

Following is my css:

@charset "utf-8";

    .page-header {
        background-color:#DDEFE6 !important;
        height:150px;
        margin:0px auto;
    }
    .navigation-row{
             

Answers


James Lloyd February 2016

You could try increasing the padding between your navbar elements so they display futher apart and thus, appear to have a large width using the following CSS:

.navbar-nav > li {
    padding-left: 30px;
    padding-right: 30px;
}

Adjust as you wish.


Nikhil Nanjappa February 2016

As James mentioned if you provide the padding-left and padding-right, it should work fine but its even better if you give those padding to the <a> elements inside the <li> rather than only the <li>. like so.

.navbar-nav > li > a {
    padding-left: 30px;
    padding-right: 30px;
}

Reason : This would affect the menu links even with any dynamic classes attached like active.

Post Status

Asked in February 2016
Viewed 2,905 times
Voted 9
Answered 2 times

Search




Leave an answer