CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
GʀᴜᴍᴘʏCᴀᴛ
GʀᴜᴍᴘʏCᴀᴛ

Reputation: 8960

Bootstrap 3 center navbar-toggle class

I am new to Bootstrap3 and I have searched the site for a possible answer but at this time I didn't find a good solution. I am trying to to create a full width navbar-toggle with a normal 15px padding on the left and right but for some reason when I try to force the CSS with a margin: 0 auto !important it still does not work. How can I create the full width navbar?

HTML: 

  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapsed-navigation">
        <span class="sr-only">Toggle navigation</span>
        <span class="glyphicon glyphicon-align-justify"></span>
        <span class="navmenu">Navigation</span>
  </button>


<div class="container">
  <div class="collapse navbar-collapse" id="collapsed-navigation">
    <form class="navbar-form navbar-right" role="search">

      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div><!-- end .form-group -->
      <button type="submit" class="btn btn-default">Foo</button>
    </form> 

    <ul class="nav navbar-nav navbar-left">
      <li class="active"><a href="#">Foobar1</a></li>
      <li><a href="#">Foobar2</a></li>
      <li><a href="#">Foobar3</a></li>
      <li><a href="#">Foobar4</a></li>
    </ul>
  </div><!-- /.navbar-collapse -->

</div><!-- end .container -->

CSS:

.navbar-toggle {
    position: relative;
    width: 100%;
    margin: 0 auto !important;
}

Upvotes: 0

Views: 12313

Answers (1)

davidpauljunior
davidpauljunior

Reputation: 8338

IF what you're saying is that it's slightly off in terms of it's alignment, like this:

Toggle button offline

Then it's because you need to override the float and the margin-right that Bootstrap gives it by default.

.navbar-toggle {
  width: 100%;
  float: none;
  margin-right: 0;
}

Demo

Upvotes: 3

Related Questions