CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
James R. Skinner
James R. Skinner

Reputation: 461

Bootstrap 3 navbar collape width

Normally when a Bootstrap navbar collapses the resulting menu is the full width of the screen. Is there any way to make it only as wide as the content and to the right of the screen?

Upvotes: 2

Views: 389

Answers (1)

neophyte
neophyte

Reputation: 6624

It can be done in the following way--

working example

 @media(max-width:767px){
              .navbar-inverse {
                width:50%;
                margin-left: 50%;
              }
            }
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           <style type="text/css">
           
           </style>
           </head>
           <body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid" id="nav-container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">header</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
    
    <ul class="nav navbar-nav navbar-right">
    <a href="" class="btn navbar-btn" id="signup">Sign Up</a>
      <!--<a href="" ><button class="btn navbar-btn" id="stud">Studier demo</button></a>-->
      <a href="" ><button class="btn  navbar-btn" id="help">log-in</button></a>
      <!--<li class="diff"><a class="nav_list" href="testlogin.php">--><!--<span class="glyphicon glyphicon-log-in"></span>--> <!--Sign Up</a></li>-->
      <a href="" ><button class="btn  navbar-btn" id="friend">another</button></a>
    </ul>
    
    </div>
  </div>
  </nav>
  </body>
  </html>

Upvotes: 2

Related Questions