Building a responsive navbar with bootstrap

Question

I am building a website using Bootstrap 3. My problem is that the navbar on the webpage shows next to the brand div, which is floated left. So the navbar doesn't have enough space when you are using your mobile phone to access the webpage and you have to scroll in the menu.

HTML

   <div class="navbar navbar-fixed-top navbar-default" role="navigation">
        <div class="container">

           <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
           </button>

          <a class="navbar-brand" href="index.html">FUTURE LOGO</a> 

           <div class="navbar-collapse navbar-responsive-collapse collapse">
              <ul class="nav navbar-nav">

                 <li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span> Domu</a></li>


                 <li><a href="obsahmp.html">Obsah MP</a></li>

                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Responzivní webdesign<strong class="caret"></strong></a>
                    <ul class="dropdown-menu">
                      <li><a href="responzivniwebdesign.html">Co to vlastně je?</a></li>
                      <li><a href="webovarozvrzeni.html">Webová rozvržení</a></li>
                      <li><a href="">Tvorba responzivního webu</a></li>

                      <li class="divider"></li>

                      <li class="dropdown-header">CSS frameworky</li>
                      <li><a href="#">Co, jak a proč?</a></li>
                      <li><a href="#">Twitter bootstrap</a></li>
                    </ul><!-- End dropdown-menu-->
                 </li><!-- End dropdown-->

                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Použité komponenty<strong class="caret"></strong></a>
                    <ul class="dropdown-menu">
                      <li><a href="navbar.html">Navbar</a></li>
                      <li><a href="dropdown.html">Dropdown</a></li>
                      <li><a href="carousel.html">Carousel</a></li>

                      <li class="divider"></li>

                      <li class="dropdown-header">Dropdown-header</li>
                      <li><a href="#">Subsection</a></li>
                      <li><a href="#">Subsection</a></li>
                    </ul><!-- End dropdown-menu-->
                 </li><!-- End dropdown-->
              </ul><!--End nav-->
           </div><!-- End navbar-collapse-->
        </div> <!-- End container-->
    </div> <!-- End navbar-->

You can also check the navbar here: www.tomas-nosek.moxo.cz. Just rezise the browser window and you will see the problem I have.

Answer 1

Try this,

add this <div class="visible-xs clearfix"></div> to end of <a class="navbar-brand" href="index.html">FUTURE LOGO</a>

this to clear your floating css on small devices,

<div class="navbar navbar-fixed-top navbar-default" role="navigation">
        <div class="container">

           <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
           </button>

          <a class="navbar-brand" href="index.html">FUTURE LOGO</a> 
            <div class="visible-xs  clearfix"></div>
           <div class="navbar-collapse navbar-responsive-collapse collapse">
              <ul class="nav navbar-nav">

                 <li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span> Domu</a></li>


                 <li><a href="obsahmp.html">Obsah MP</a></li>

                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Responzivní webdesign<strong class="caret"></strong></a>
                    <ul class="dropdown-menu">
                      <li><a href="responzivniwebdesign.html">Co to vlastně je?</a></li>
                      <li><a href="webovarozvrzeni.html">Webová rozvržení</a></li>
                      <li><a href="">Tvorba responzivního webu</a></li>

                      <li class="divider"></li>

                      <li class="dropdown-header">CSS frameworky</li>
                      <li><a href="#">Co, jak a proč?</a></li>
                      <li><a href="#">Twitter bootstrap</a></li>
                    </ul><!-- End dropdown-menu-->
                 </li><!-- End dropdown-->

                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Použité komponenty<strong class="caret"></strong></a>
                    <ul class="dropdown-menu">
                      <li><a href="navbar.html">Navbar</a></li>
                      <li><a href="dropdown.html">Dropdown</a></li>
                      <li><a href="carousel.html">Carousel</a></li>

                      <li class="divider"></li>

                      <li class="dropdown-header">Dropdown-header</li>
                      <li><a href="#">Subsection</a></li>
                      <li><a href="#">Subsection</a></li>
                    </ul><!-- End dropdown-menu-->
                 </li><!-- End dropdown-->
              </ul><!--End nav-->
           </div><!-- End navbar-collapse-->
        </div> <!-- End container-->
    </div> <!-- End navbar-->

Demo

Answer 2

You want to put a "clear:left" in the navbar on mobile. Also maybe add 'col-xs-12' as a class to the container with the menu.

Basically you have to break the menu to a new line.