1

Buenas soy nuevo en aquí, el asunto es que quiero que la imagen del usuario (La que aparece a la derecha del todo) se ve bien cuando el header esta expandido, pero cuando entra en modo de móviles aparece como una opción más en el menú, me gustaría que aún cuando este en modo de móvil se mantenga el logo a la derecha del todo. Estoy usando Bootstrap4

introducir la descripción de la imagen aquí

Me gustaría que el logo se mantuviera aún en este estado (Lo que llamo vista de móvil)

introducir la descripción de la imagen aquí

<div class="container-fluid bg-dark">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="index.php"> <img src="iconos/delfin (1).png"> Caribe</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="input-group mb-3 " style="width: 50%; position: absolute; top: 1em; left: 10em;">
      <input type="text" class="form-control" placeholder="¿Qué estas buscando...?">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary alert-secondary" type="button" id="button-addon2">Buscar</button>
      </div>
    </div>

    <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="productos.php">Productos</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="bienes.php">Bienes</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="Servicios.php">Servicios</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="add.php">Añadir</a>
        </li>
        <li class="nav-item">
          <img src="iconos/interfaz.png" style="width:42px; margin-left:10px">
        </li>
      </ul>
    </div>
  </nav>
</div>

(Los estilos css estan en las etiquetas porque es una plantilla de pruebas)

5
  • Agrega tu código por favor
    – user128299
    Commented el 1 may. 2020 a las 6:40
  • 1
    Tu avatar de usuario está dentro de un elemento Collapse, tendrías que ubicar el mismo fuera de dicho elemento. Pero sin ver el código es poco lo que podemos sugerir. Saludos Commented el 1 may. 2020 a las 6:43
  • Gracias, ya subo el codigo
    – Flav
    Commented el 1 may. 2020 a las 7:31
  • Simplemente saca el <li> del icono de usuario fuera del div con clase collapse, tal como te indica Mauricio. Commented el 1 may. 2020 a las 23:55
  • @JheymanMejia el problema es que luego no me deja abrir el menu desplegable, no aparece el boton con las 3 rayas
    – Flav
    Commented el 2 may. 2020 a las 7:10

1 respuesta 1

1

Para lograr lo que te propones será necesario realizar una serie de cambios en la forma en la que tienes actualmente tu barra de navegación.

Partimos del comentario inicial que te hice: debes sacar tu imagen de usuario fuera del área del elemento tipo Collapse de Bootstrap.

SOLUCIÓN

Lo que se me ocurre que puedes hacer es lo siguiente, y esto es una sugerencia de acuerdo a mi experiencia.

  1. Crear un contenedor principal con las siguientes características:

    • Contenedor: Fluido
    • Tipo de display: flex
    • Dirección de display: row.
  2. Dentro de este contenedor pondremos 2 elementos:

    • Elemento tipo nav
    • Elemento tipo div que servirá de contenedor para nuestra imagen
  3. El contenedor nav será el que usualmente construimos con la ayuda de Bootstrap, y le daremos estilos adecuados para su correcta visualización. Usaremos el sistema de responsive breakpoints de Bootstrap para ocultar y mostrar tu elemento de búsqueda, ya que para ciertos tamaños de pantalla no será posible mostrarlo correctamente.

El código queda de la siguiente forma:

.contenedor {
  display: flex;
  flex-direction: row;
  justify-content: space-between;"
}

.contenedor .navbar {
  width: 100%;
}

.contenedor .input-group {
  width: 50vw;
}

.contenedor .avatar {
  width: 3rem;
}
<!-- CSS de Bootstrap 4.4.1-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<!-- Contenedor fluido -->
<div class="container-fluid bg-dark contenedor">
  <!-- Barra de Navegación -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- BRAND -->
    <a class="navbar-brand" href="#"> <img src="..."> Caribe</a>
    <!-- Input de búsqueda -->
    <!-- He puesto display:none para ancho de pantalla muy pequeño
         y diplay:flex para pantallas con ancho igual o superior a 576px -->
    <div class="input-group d-none d-sm-flex">
      <input type="text" class="form-control" placeholder="¿Qué estas buscando...?">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary alert-secondary" type="button" id="button-addon2">Buscar</button>
      </div>
    </div>
    <!-- Botón Toggler -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- Contenedor Collapse de links -->
    <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Productos</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Bienes</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Servicios</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Añadir</a>
        </li>
      </ul>
    </div>
  </nav>
  <!-- Contendor de Avatar de Usuario -->
  <div class="mr-3 mr-lg-0 my-2">
    <img class="avatar" src="...">
  </div>
</div>

<!-- Scripts necesarios para Bootstrap -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Esta sería una de las formas de lograr que la imagen avatar de usuario siempre sea visible sin importar si se muestra o no la barra de navegación.

1
  • Muchisimas gracias, me funciono.
    – Flav
    Commented el 3 may. 2020 a las 1:34

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.