0

Hola estoy comenzando en esto de Bootstrap y quiero hacer una barra de navegación típica de ecommerce donde aparezca el logo, un formulario de búsqueda, login/sign up y el carrito de compras, pero al achicar la pantalla se conviertan en iconos.

Les muestro unas imágenes de referencia de la barra en formato escritorio y móvil.

navbar escritorio

navbar movil

Y el código hasta el momento, solo muestra lo mismo en las pantalla móviles, no se cómo cambiar el aspecto.

<!DOCTYPE html>
  <html>
   <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>shop</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
   </head>
   <body>
    <header>
     <nav class="navbar navbar-expand navbar-dark bg-dark">
       <div class="container">
        <a class="navbar-brand" href="#">Logo</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" 
        data-target="#myNavBar" aria-controls="#myNavBar" 
        aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
        </button>

        <div class="navbar-collapse justify-content-md-center collapse">
         <form class="form-inline my-2 my-md-0">
          <input class="form-control" type="text" placeholder="Search">
         </form>
         <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#"><i class="fas fa-user"></i> 
            Usuario</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#"><i class="fas fa-shopping-cart"> 
            </i>  Carrito</a>
            </li>
            </ul>                   
        </div>
       </div>
     </nav>
   </header>
    <script src="js/font-awesome.js"></script>
    <script src="js/jquery-3.0.0.js"></script>
    <script src="js/popper.min.js"></script>  
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>   
 </body>
</html>
2
  • Qué finalidad esperas al trabajar en vistas más pequeñas? Necesitas lograr un menú colapsable? Commented el 16 nov. 2018 a las 14:25
  • Quiero desarrollar en modo responsive es por eso que trabajo las distintas vistas, el código ya colapsa el menú, he visto que en la mayoría de las web el comportamiento versión móvil cambia, una de esas es la forma de presentar el menú que al colapsar solo muestra iconos en vez de texto, eso es lo que quiero lograr.
    – Andrea
    Commented el 19 nov. 2018 a las 20:47

1 respuesta 1

1

Puedes jugar con los @media y la propiedad css display:none

div {
  width: 100%;
  padding: 20px;
  background-color: #333;
  color: #fff;
  font-size: 26px;
}

span.icon {
  height: 32px;
}

@media (min-width: 641px) {
    span.icon {display:none}
    span.text {display:inline-block}
}

@media (max-width: 640px) {
    span.icon {display:inline-block}
    span.text {display:none}
}
<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<div>
    <span class="text"><i class="far fa-smile"></i> Smile</span>
    <span class="icon"><i class="far fa-smile"></i></span>
</div>
</body>

Si estás trabajando en Bootstrap también puedes usar las utilidades que trae en display (por ejemplo con la clase .hidden-*-xs) Puedes leer más al respecto en el sitio de Bootstrap


También te puedes documentar sobre cómo ocultar un texto (o lo que desees) en determinadas resoluciones de pantalla, mira aquí

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.