I'm trying to make a responsive navbar. It is working fine in large windows but when I put it in a xs screen it is not collapsing well the fist element of the nabar. I put an exemple of the two cases:

First case, it's working fine: enter image description here

And this is the second case: enter image description here

Why is the "HOME" Not colapsing?

I attach the code of the html and the css code:

html {
  background: url(Fondo.jpg) no-repeat center center fixed;
  /*Poner foto de fondo. */
  background-size: cover;
  /*Para que la foto ocupe toda la pantalla*/
  overflow-y: auto;
  /*Para que salga scroollbar cuando se hace zoom*/
  /*overflow-x:auto;*/
  font-family: Arial, Helvetica, sans-serif;
  /*Tipo de letra en todo el documento*/
}

body {
  background: none !important;
  margin: 0 !important;
  /*Estas dos lineas son para que la navbar este pegada arriba*/
  padding: 0 !important;
}

h2 {
  color: #4CAF50;
}

label {
  font-weight: bold;
}

input[type=text],
input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: 2px solid rgb(0, 0, 0);
  cursor: pointer;
  width: 100%;
  border-radius: 8px;
}

button:hover {
  /* Que sucede cuando se coloca raton encima de boton */
  opacity: 0.8;
}

span.psw {
  float: right;
  /*padding-top: 16px;*/
}

.blue-column {
  background-color: #D1E4F2;
  opacity: 0.8;
  margin-left: auto;
  margin-right: auto;
  display: block;
  padding-top: 5px;
  /**Para que el titutlo este un poco separado del margen azul de arriba*/
  padding-left: 10px;
  padding-right: 10px;
}

.piedepagina {
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 27px;
  width: 100%;
  background-color: #2794DE;
  text-align: center;
  float: right;
  font-size: 10px;
}

.piedepaginaInside {
  display: inline-block;
  margin-left: 10px;
}

.navbar li a {
  color: #ffff;
}
<!DOCTYPE html>
<html>
<title>Login</title>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" , charset="UTF-8">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  <link rel="stylesheet" type="text/css" href="css/Login.css">
</head>

<body>

  <nav class="navbar navbar-inverse navbar-static-top" style="background-color: #045186;">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar2">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>                        
            </button>
        <a class="navbar-brand" style="color: white" href="#">Home</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar2">
        <ul class="nav navbar-nav">
          <li><a style="color: white" href="Login.html"><span class="glyphicon glyphicon-user"style="color: white"></span> Iniciar Sesion</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a style="color: white" href="#">Sobre Nosotros</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <br>


  <div class="container-fluid " style="background:none">
    <div class="row">

      <div class="col-xs-12 col-md-6 col-md-offset-3">
        <!-- El offset es para centrar la columna en el medio de la pantalla-->
        <div class="blue-column">
          <label for="uname"><b>Usuario</b></label>
          <input type="text" placeholder="Introduce el usuario" name="uname" id="uname">

          <label for="psw"><b>Password</b></label>
          <input type="password" placeholder="Introduce el password" name="psw" id="psw">
          <div class="center-block text-center">
            <input type="radio" name="tipousuario" value="corredor" id="tipousuario"> Corredor
            <input type="radio" name="tipousuario" value="voluntario" id="tipousuario"> Voluntario<br>
          </div>
          <button id="login" value="Login" onclick="post();">Iniciar Sesion</button>
          <label>
                  <input type="checkbox" checked="checked" name="Recordarme"> Recordarme
                </label>
          <label>
                  <span class="psw"><a href="#">Olvido la contraseƱa?</a></span>
                </label>
        </div>
      </div>
    </div>
  </div>
  <br><br><br><br><br><br><br><br><br><br>

  <footer class="piedepagina">
    <i class="fa fa-facebook-official w3-hover-opacity"></i><i class="fa fa-instagram w3-hover-opacity"> </i><i class="fa fa-twitter w3-hover-opacity"> </i><i class="fa fa-linkedin w3-hover-opacity"></i>
    <p class="piedepaginaInside">Powered by <a href="https://www.linkedin.com/in/victor-dorado-fern%C3%A1ndez-03b842105/" target="_blank">Victor Dorado</a></p>
  </footer>

</body>

Thanks in advance for the help!!

PD: In fact i want something like this:

enter image description here

2 Answers

0
K. P. On

It's because your home link is not inside the collapse navbar-collapse div.

Here's the corrected JS fiddle:

3
vicky9988 On

Issue is with the style, its applied for button.

You have defined the CSS for button tag and due to this its applied for both login and nav-bar buttons that's y output is not proper.

Please check the below code.

html {
    background: url(Fondo.jpg) no-repeat center center fixed;  /*Poner foto de fondo. */
    background-size:cover;                                     /*Para que la foto ocupe toda la pantalla*/
    overflow-y:auto;                                           /*Para que salga scroollbar cuando se hace zoom*/
    /*overflow-x:auto;*/
    font-family: Arial, Helvetica, sans-serif;                 /*Tipo de letra en todo el documento*/
    }

body{
  background:none !important;
  margin: 0 !important;         /*Estas dos lineas son para que la navbar este pegada arriba*/
  padding: 0 !important;
}

h2{
    color:#4CAF50;
}

label{
    font-weight:bold;
}


input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }

  button.login{
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: 2px solid rgb(0, 0, 0);
    cursor: pointer;
    width: 100%;
    border-radius: 8px;
  }

  button.login:hover{                                /* Que sucede cuando se coloca raton encima de boton */
    opacity: 0.8;
  }


  span.psw {  
    float: right;
    /*padding-top: 16px;*/
  }

  .blue-column {
    background-color: #D1E4F2;
    opacity: 0.8;
    margin-left: auto;
    margin-right: auto;
    display:block;
    padding-top: 5px;/**Para que el titutlo este un poco separado del margen azul de arriba*/
    padding-left: 10px;
  padding-right: 10px;

  }

  .piedepagina{
    position:fixed;
    left:0px;
    bottom:0px;
    height:27px;
    width:100%;
    background-color: #2794DE;
    text-align: center;
    float: right; 
    font-size: 10px;

  }
  .piedepaginaInside{
    display: inline-block;
    margin-left: 10px;

  }


.navbar li a {
  color: #ffff;
}
@media only screen and (max-width: 900px) {
  .columns {
      width: 100%;
  }
}
<!DOCTYPE html>
<html>
<title>Login</title>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" , charset="UTF-8">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <nav class="navbar navbar-inverse navbar-static-top" style="background-color: #045186;">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar2"
        area-controls="navbar" aria-expanded="false">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>                        
        </button>
        <a class="navbar-brand" style="color: white" href="#">Home</a>
      </div>
      <div class="collapse navbar-collapse " id="myNavbar2">
        <ul class="nav navbar-nav navbar-right">
          <li><a style="color: white" href="Login.html"><span class="glyphicon glyphicon-user"style="color: white"></span> Iniciar Sesion</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a style="color: white" href="#">Sobre Nosotros</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <br>


  <div class="container-fluid " style="background:none">
    <div class="row">

      <div class="col-xs-12 col-md-6 col-md-offset-3">
        <!-- El offset es para centrar la columna en el medio de la pantalla-->
        <div class="blue-column">
          <label for="uname"><b>Usuario</b></label>
          <input type="text" placeholder="Introduce el usuario" name="uname" id="uname">

          <label for="psw"><b>Password</b></label>
          <input type="password" placeholder="Introduce el password" name="psw" id="psw">
          <div class="center-block text-center">
            <input type="radio" name="tipousuario" value="corredor" id="tipousuario"> Corredor
            <input type="radio" name="tipousuario" value="voluntario" id="tipousuario"> Voluntario<br>
          </div>
          <button id="login" class="login" value="Login" onclick="post();">Iniciar Sesion</button>
          <label>
                  <input type="checkbox" checked="checked" name="Recordarme"> Recordarme
                </label>
          <label>
                  <span class="psw"><a href="#">Olvido la contraseƱa?</a></span>
                </label>
        </div>
      </div>
    </div>
  </div>
  <br><br><br><br><br><br><br><br><br><br>

  <footer class="piedepagina">
    <i class="fa fa-facebook-official w3-hover-opacity"></i><i class="fa fa-instagram w3-hover-opacity"> </i><i class="fa fa-twitter w3-hover-opacity"> </i><i class="fa fa-linkedin w3-hover-opacity"></i>
    <p class="piedepaginaInside">Powered by <a href="https://www.linkedin.com/in/victor-dorado-fern%C3%A1ndez-03b842105/" target="_blank">Victor Dorado</a></p>
  </footer>

</body>
</html>

I have given the class for your login button and separate the CSS style applied for login button from the nav-bar button.

Here is the updated output

enter image description here