Twitter Bootstrap Question posted in

bootstrap 3 – Disable navbar-toggle stacking on mobile phones – Twitter bootstrap

How to disable navbar in Twitter Bootstrap 3 to stack toggle button into new line, when the page is accessed via mobile phone?

I always get something like this:

Screenshot
(source: toile-libre.org)

I’ve tried everything, from adding custom CSS to modifying .less files and further recompiling the whole Bootstrap style (I’ve been changing @grid-float-breakpoint variable and I even have played with navbar.less), but unfortunately I had no success.

Can somebody help me, please? I’m desperate because I’ve lost a whole day trying to fix this.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Solved it, I had to add width attribute to the div container which has these two buttons from the right. The div was improperly resizing, hence it was putting the second (toggle) button in the new line.


  2. 0

    try removing the collapse class from the menu, and deleting the button:

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>
    Login or Signup to reply.
  3. 0

    The .navbar-toggle has property float: right;. Check the HTML-code of your navbar. The toggle button should be placed first, before the other parts of the menu.

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

Back To Top
Search