CODEWITHSUNDEEP
twitter-bootstrap
Nazmul
Nazmul

Reputation: 55

Bootstrap Navbar width same as container

I am using Bootstrap 3 . i can't give the navbar same width with the container. if it works in large screen but don't work in other screen size. How can i make a fixed size of my navbar which will change different screen with the same width as container has.

<div class="row"><!--Start row-->
     <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
         <div class="container">
                <div class="navbar-header"><!-- -->
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="glyphicon glyphicon-arrow-down">Menu</span>
                    </button>

                </div>
                <div class="collapse navbar-collapse" id="collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Course List</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div><!--End Collapse-->
         </div>
     </nav><!--End Navbar-->
</div>

Upvotes: 4

Views: 15461

Answers (3)

Larsons
Larsons

Reputation: 1

you forgot a row class (line 2)

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top container" role="navigation">
  <div class="row">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="glyphicon glyphicon-arrow-down">Menu</span>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="collapse">
        <ul class="nav navbar-nav">
          <li><a href="#">title</a>
          </li>
          <li><a href="#">title</a>
          </li>
          <li><a href="#">title</a>
          </li>
          <li><a href="#">title</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Upvotes: 0

Rick
Rick

Reputation: 517

Just turn the class container-fluid to container, and you're done. Worked for me...

Upvotes: 3

theRyanMark
theRyanMark

Reputation: 710

The fix I would make to this is to simply put the container class in the <nav class="..."> this will constrain your nave bar to be the width specified by the container attribute.

Code below:

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top container" role="navigation">
         <div class="container-fluid">
                <div class="navbar-header"><!-- -->
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="glyphicon glyphicon-arrow-down">Menu</span>
                    </button>

                </div>
                <div class="collapse navbar-collapse" id="collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Course List</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div><!--End Collapse-->
         </div>
     </nav>

Also it is not nessicary for the <nav> to be wrapped in a <div class="row"> I hope this is what you were looking for.

Upvotes: 18

Related Questions