navbar-toggle bootstrap content hidden by another div

Question

I'm using the bootstrap navbar-toggle button and when I click on it, the content stays hidden by the next div, I'm trying to fix it but I can't see the error.

You will see I have two div.row. The second div.row is hidding the div id="navbar1" content, that is the target of the navbar-toggle button.

<div class="container-fluid">

  <div class="row">                                            
    <nav class="navbar navbar-default" style="height:75px;">
      <div class="container-fluid">
        <div class="navbar-header">                             
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1">
            <span class="sr-only">Menu</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand"><img src="zzlogo.png"></a>
        </div>
        <div class="collapse navbar-collapse" id="navbar1">
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Nosotros <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Desarrolladores</a></li>
                <li><a href="#">Trayectoria</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Productos <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Abarrotes</a></li>
                <li><a href="#">Frutas y Verduras</a></li>
                <li><a href="#">Carnes</a></li>
                <li><a href="#">Lácteos</a></li>
              </ul>
            </li>
            <li><a href="#">Contacto</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>


<!-- THIS DIV IS NOT MOVING WHEN I CLICK ON THE NAVBAR-TOGGLE BUTTON -->

  <div class="row">
    <nav class="navbar navbar-inverse">
      <div class="container">
        <div class="navbar-header col-xs-5 col-sm-4 col-md-3 col-lg-3">
          <a href="#" class="navbar-brand">Administración</a>
        </div>
        <div class="col-xs-7 col-sm-8 col-md-9 col-lg-9">
          <ul class="nav navbar-nav">
            <li ><a href="#">Usuarios</a></li>
            <li ><a href="#">Productos</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</div>

Sorry for my bad english and thanks.

Answer 1

The problem is caused by declaring a height for the navbar (height: 75px). It's default is min-height: 50px so once the viewport is under 768px the navbar can't expand rendering the background as "invisible" if you will.

You can use padding to increase the height.

See working examples.

Example 1

.navbar.navbar-top {
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 0;
  border-radius: 0;
}
.navbar.navbar-bottom {
  border-radius: 0;
}
.navbar-top .navbar-brand {
  padding-top: 0;
  margin-top: -12px;
}
@media (max-width: 767px) {
  .navbar-top .navbar-collapse {
    margin-top: 20px;
    margin-bottom: -20px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1"> <span class="sr-only">Menu</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
      <a href="#" class="navbar-brand">
        <img src="http://placehold.it/150x75/f00">
      </a>

    </div>
    <div class="collapse navbar-collapse" id="navbar1">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Nosotros <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Desarrolladores</a>

            </li>
            <li><a href="#">Trayectoria</a>

            </li>
          </ul>
        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Productos <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Abarrotes</a>

            </li>
            <li><a href="#">Frutas y Verduras</a>

            </li>
            <li><a href="#">Carnes</a>

            </li>
            <li><a href="#">Lácteos</a>

            </li>
          </ul>
        </li>
        <li><a href="#">Contacto</a>

        </li>
      </ul>
    </div>
  </div>
</nav>
<nav class="navbar navbar-inverse navbar-bottom">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2"> <span class="sr-only">Menu</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a href="#" class="navbar-brand">Administración</a>

    </div>
    <div class="collapse navbar-collapse" id="navbar2">
      <ul class="nav navbar-nav">
        <li><a href="#">Usuarios</a>

        </li>
        <li><a href="#">Productos</a>

        </li>
      </ul>
    </div>
  </div>
</nav>

Example 2

.navbar.navbar-top {
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 0;
  border-radius: 0;
}
.navbar.navbar-bottom {
  border-radius: 0;
}
.navbar.navbar-bottom a {
  margin: 0 5px;
}
.navbar-top .navbar-brand {
  padding-top: 0;
  margin-top: -12px;
}
@media (max-width: 767px) {
  .navbar-top .navbar-collapse {
    margin-top: 20px;
    margin-bottom: -20px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1"> <span class="sr-only">Menu</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
      <a href="#" class="navbar-brand">
        <img src="http://placehold.it/150x75/f00">
      </a>

    </div>
    <div class="collapse navbar-collapse" id="navbar1">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Nosotros <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Desarrolladores</a>

            </li>
            <li><a href="#">Trayectoria</a>

            </li>
          </ul>
        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Productos <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Abarrotes</a>

            </li>
            <li><a href="#">Frutas y Verduras</a>

            </li>
            <li><a href="#">Carnes</a>

            </li>
            <li><a href="#">Lácteos</a>

            </li>
          </ul>
        </li>
        <li><a href="#">Contacto</a>

        </li>
      </ul>
    </div>
  </div>
</nav>
<nav class="navbar navbar-inverse navbar-bottom">
  <div class="container">
    <div class="navbar-header"> <a href="#" class="navbar-brand">Administración</a>

      <p class="navbar-text"> <a href="#" class="navbar-link">Usuarios</a>  <a href="#" class="navbar-link">Productos</a>

      </p>
    </div>
  </div>
</nav>