M. Mariscal M. Mariscal - 2 months ago 13
HTML Question

How to tidy up this navbar on bootstrap?

I'm learning some Bootstrap and this problem is getting me off, because I'd like to know how to tidy this navbar correctly, I did some col, col-offset... but nothing helps me...

What I'm trying to get is:

WANTED NAVBAR

INDEX.HTML (NAVBAR SNIPPET)

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAB+0lEQVR4AcyYg5LkUBhG+1X2PdZGaW3btm3btm3bHttWrPomd1r/2Jn/VJ02TpxcH4CQ/dsuazWgzbIdrm9dZVd4pBz4zx2igTaFHrhvjneVXNHCSqIlFEjiwMyyyOBilRgGSqLNF1jnwNQdIvAt48C3IlBmHCiLQHC2zoHDu6zG1iXn6+y62ScxY9AODO6w0pvAqf23oSE4joOfH6OxfMoRnoGUm+de8wykbFt6wZtA07QwtNOqKh3ZbS3Wzz2F+1c/QJY0UCJ/J3kXWJfv7VhxCRRV1jGw7XI+gcO7rEFFRvdYxydwcPsVsC0bQdKScngt4iUTD4Fy/8p7PoHzRu1DclwmgmiqgUXjD3oTKHbAt869qdJ7l98jNTEblPTkXMwetpvnftA0LLHb4X8kiY9Kx6Q+W7wJtG0HR7fdrtYz+x7iya0vkEtUULIzCjC21wY+W/GYXusRH5kGytWTLxgEEhePPwhKYb7EK3BQuxWwTBuUkd3X8goUn6fMHLyTT+DCsQdAEXNzSMeVPAJHdF2DmH8poCREp3uwm7HsGq9J9q69iuunX6EgrwQVObjpBt8z6rdPfvE8kiiyhsvHnomrQx6BxYUyYiNS8f75H1w4/ISepDZLoDhNJ9cdNUquhRsv+6EP9oNH7Iff2A9g8h8CLt1gH0Qf9NMQAFnO60BJFQe0AAAAAElFTkSuQmCC" width="20">
</a>
</div>
<div class="row">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<!--SEARCH NAVBAR-->
<div class="row">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Alta usuari</a></li>
<li><a href="#">Cerca d'usuaris</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Manteniment taules mestre</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Ajuda DIBA</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
</div>
<!--MENU NAVBAR-->
<button type="button" class="collapsed navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">ToggleNav</span>
<!--EL ICONO DE MENU, SE HACE ASI, QUE TRISTE-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</nav>


What are the best practices to get a correct order implementing some stuff on a navbar? Thanks you very much

UPDATE ERROR BRACKETS:


BRACKETS ERROR


I know that's not an error of code, but it disconnects the live preview, and when I maximize the windows, it doesn't shows the navbar-toggle...

Answer

For visualizing your toggle-bar in all screen size you have to use this css code:

.navbar-header {
  float: none;
}
.navbar-toggle {
  display: block;
}
.navbar-collapse.collapse {
  display: none!important;
}
.navbar-nav {
  float: none!important;
}
.navbar-nav>li {
  float: none;
}
.navbar-collapse.collapse.in{
  display:block !important;
}

I have also keep some menu in toggle bar. you can change/delete it.

You don't need to use row.

<div class="navbar-header">
    <a class="navbar-brand" href="#">B</a>
    <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 class="dropdown pull-right" style="margin-top:7px;">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" 
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                Dropdown
                <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#">Alta usuari</a></li>
                    <li><a href="#">Cerca d'usuaris</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Manteniment taules mestre</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Ajuda DIBA</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Logout</a></li>
                </ul>
            </div>

    <form class="navbar-form navbar-right" role="search">
        <div class="form-group input-group">
          <input type="text" class="form-control" placeholder="Search..">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button">
              <span class="glyphicon glyphicon-search"></span>
            </button>
          </span>
        </div>
      </form>
  </div>

See your desired output: http://www.bootply.com/obQ6W1pL81