Twitter Bootstrap Question posted in

Twitter bootstrap – navbar-fixed-top cancels .container centering

Why does twitter bootstrap’s navbar-fixed-top or navbar-fixed-bottom makes a navbar full width and cancels the effect of .container which centers a navbar? See code below

<div class="container">
  <nav class="navbar navbar-fixed-top navbar-full navbar-dark bg-inverse">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

Can someone explain this?

Tags:

2

Answers


  1. 0

    Did you try add your container class to nav element? 

     <nav class="navbar navbar-fixed-top navbar-full navbar-dark bg-inverse container">
   <a class="navbar-brand" href="#">Navbar</a>
 </nav>

    I guess it should help a little and if you add your own class like text-center with css: text-align:center; that should help you 🙂

    Login or Signup to reply.
  2. 0

    I did manage to make it work by adding the class container inside the <div class="navbar navbar-inverse navbar-fixed-top">

    This is how my code looks like.

    <div class="container">
    <div class="container navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                    <li><a href="#">Test</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    You can see it working here:
    Codepen

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search