CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
hussain
hussain

Reputation: 7123

How to to make bootstrap navbar smaller in width?

I want to make bootstrap navbar smaller and keep it right but small issue here i have some data dynamically loading at right side of grid that is overlapped by navbar so i want to keep navbar offset around 3 columns from right,so I added css class container-panel to make width smaller and to keep it to right i have margin-left.But on different pixels it breaks and navbar is overlapped on other elements. Is there any fix in bootstrap to achieve this task ?

main.html 

<div class="col-md-10">
    <nav class="navbar navbar-default container-panel">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
              </button>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="z-index:10;">
                <ul class="nav navbar-nav pull-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-file"></span><span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#"><span ng-click="createXml()">Create new BPMN Diagram</span></a></li>
                        </ul>
                    </li>
                    <li><a href="#"><span class="glyphicon glyphicon-folder-open"></span></a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

main.css 

.navbar.container-panel {
  width:554px;
  margin-left: 760px;
}

Upvotes: 1

Views: 3429

Answers (1)

Korgrue
Korgrue

Reputation: 3478

Use a variable width, like vw or % to adapt the width relative to the screen width. You may have to tweak the vw or % at smaller breakpoints as to not cut off your navbar content.

.navbar.container-panel {
  width:60vw;
  margin-left: 760px;
}

or

.navbar.container-panel {
  width:60%;
  margin-left: 760px;
}

Upvotes: 3

Related Questions