1

Buenos dias tengo la siguiente cabecera

/*PERSONALIZACION DE LA BARRA DE NAVEGACION*/
.mvertical{
    display: none;
}
@media screen and (max-width: 900px) {
    .mvertical{
        display: block;
    }
}
@media screen and (min-width: 900px) {
    .navegacion{
        display: block;
    }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<header class="site-navbar py-1" role="banner">

        <div class="container col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="row align-items-center">
                <div class="col-lg-4 col-xl-4 col-md-4 col-sm-4 col-4 icono">
                    <p class="mb-0 h2"><a href="index.php" class="text-black mb-0"><img src="https://es.freelogodesign.org/Content/img/logo-ex-7.png">Cabecera de prueba</a></p>
                </div>
                <div class="col-lg-6 col-xl-6 col-md-6 col-sm-6 col-6 navegacion">
                    <nav class="site-navigation position-relative text-right text-lg-center" role="navigation">

                        <ul class="site-menu js-clone-nav mx-auto d-none d-lg-block">
                            <li><a href="index.php">Inicio</a></li>
                            <li><a href="#horarios">Horario</a></li>
                            <li><a href="#servicios">Servicios</a></li>
                            <li><a href="#alquiler">Presupuestos</a></li>
                            <li><a href="#flota">Nuestra Flota</a></li>
                            <li><a href="sugerencias.php">Sugerencias</a></li>
                            <li><a href="">Noticias</a></li>
                        </ul>
                    </nav>
                </div>
                <div class="dropdown col-md-2 col-sm-2 col-2 mvertical">
                    <button type="button" class="fa icon-bars" data-toggle="dropdown">
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="index.php">Inicio</a>
                        <a class="dropdown-item" href="#horarios">Horario</a>
                        <a class="dropdown-item" href="#servicios">Servicios</a>
                        <a class="dropdown-item" href="#alquiler">Presupuestos</a>
                        <a class="dropdown-item" href="#flota">Nuestra Flota</a>
                        <a class="dropdown-item" href="sugerencias.php">Sugerencias</a>
                        <a class="dropdown-item" href="">Noticias</a>
                    </div>
                </div>
            </div>
        </div>
    </header>

El caso es que quiero que cuando desaparezca el menú normal cuando "no coja" en la pantalla se oculte y se muestre el dropdown menu a la derecha del todo, el caso es que aun cuando voy reduciendo la pantalla el ratio de aspecto de la imagen y de las letras "cabecera de prueba" se mantiene, yo quiero que se vaya reduciendo hasta los 800px mas o menos y entoces ya me oculte el menu normal y me muestre el menu dropdown pero pegado en la parte derecha espero puedan ayudarme, gracias

Acabo de encontrar un error de los muchos que hay, y es que al hacer display:none cuando hay menos de "X"px me lo oculta pero me mantiene el col-6 cogido por ese div "el del menu normal"

Cabecera al maximo de pantalla: introducir la descripción de la imagen aquí

Cabecera hasta los 900px de pantalla: introducir la descripción de la imagen aquí

Cabecera desde 900px hasta los 640px: introducir la descripción de la imagen aquí Cabecera con menos de 640px: introducir la descripción de la imagen aquí

4
  • ¿Con que se reduzca el aspect ratio te refieres a que la imagen se vaya haciendo más pequeña a medida que la página lo hace? Posdata: Te edité los scripts de las librerías porque te estaban ocasionando un error.
    – phpMyGuel
    Commented el 17 jul. 2019 a las 8:48
  • @phpMyGuel en primer lugar gracias, si quiero que el texto y la imagen se vayan reduciendo , y cuando llegue a menos de 900px desaparezca el menu normal y aparezca el dropdown menu cosa que me hace bien pero claro las letras me las deforma me las pone debajo de la imagen, etc porque no "entra" ya que el menu normal lo oculta pero sigue ocupando su espacio
    – KeTeMeTo
    Commented el 17 jul. 2019 a las 9:21
  • La pregunta es bastante amplia, porque según te he entendido habría que modificar bastantes cosas, partiendo de la estructura de cols de boostrap que está usando. Si pudieras facilitar una imagen del resultado esperado sería de mucha ayuda.
    – phpMyGuel
    Commented el 17 jul. 2019 a las 9:40
  • @phpMyGuel voy a añadirlas a ver si entre los dos lo solucionamos porque me tiene hasta el moño, y estoy mas calvo de un mejillon, con eso te lo digo todo
    – KeTeMeTo
    Commented el 17 jul. 2019 a las 10:13

1 respuesta 1

1

Te he hecho un pequeño prototipo simplificado. Tu HTML se encontraba muy liado, con clases que no venían a cuento y otras que no servían para nada o para casi nada.

He tratado de que sea lo más simple posible con el fin de que puedas luego tú rellenarla con lo que necesites.

/*PERSONALIZACION DE LA BARRA DE NAVEGACION*/
#cabecera-logo {
  display: flex;
  width: 300px;
}

#cabecera-logo img {
  width: 100px;
}

#cabecera-logo p {
  font-size: 20px;
}

#menu {
  display: flex;
}

#menu ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

#menu ul > li {
  margin: 0px 20px;
}

#contenedor-menu {
  width: calc(100% - 340px);
}

#contenedor-menu-movil {
  display: none;
  width: calc(100% - 340px);
}

@media (max-width: 900px) {
  #contenedor-menu {
    display: none;
  }
  
  #contenedor-menu-movil {
    display: flex;
    justify-content: flex-end;
  }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<header class="site-navbar py-1" role="banner">

<div class="container col-12">
  <div class="row">
    <div id="cabecera-logo">
      <p><a href="index.php"><img src="https://es.freelogodesign.org/Content/img/logo-ex-7.png">Cabecera de prueba</a>         </p>
    </div>
    <div id="contenedor-menu">
      <nav id="menu" class="site-navigation" role="navigation">
        <ul class="site-menu">
            <li><a href="index.php">Inicio</a></li>
            <li><a href="#horarios">Horario</a></li>
            <li><a href="#servicios">Servicios</a></li>
            <li><a href="#alquiler">Presupuestos</a></li>
            <li><a href="#flota">Nuestra Flota</a></li>
            <li><a href="sugerencias.php">Sugerencias</a></li>
            <li><a href="">Noticias</a></li>
        </ul>
      </nav>
    </div>
    <div id="contenedor-menu-movil">
      <div class="dropdown col-md-2 col-sm-2 col-2 mvertical">
        <button type="button" class="fa icon-bars" data-toggle="dropdown">
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="index.php">Inicio</a>
            <a class="dropdown-item" href="#horarios">Horario</a>
            <a class="dropdown-item" href="#servicios">Servicios</a>
            <a class="dropdown-item" href="#alquiler">Presupuestos</a>
            <a class="dropdown-item" href="#flota">Nuestra Flota</a>
            <a class="dropdown-item" href="sugerencias.php">Sugerencias</a>
            <a class="dropdown-item" href="">Noticias</a>
        </div>
      </div>
    </div>
  </div>
</div>

6
  • voy a probarlo y te digo, muchas gracias!, como habras notado de diseño ando corto...
    – KeTeMeTo
    Commented el 17 jul. 2019 a las 11:08
  • el codigo esta mas limpio asi, pero tengo el mismo problema que es que las letras se bajan abajo para la vista movil y lo unico que tiene que hacer es que el icono y el texto se hagan mas pequeños, y que desaparezca un menu y aparezca otro
    – KeTeMeTo
    Commented el 17 jul. 2019 a las 11:23
  • Pero en las imágenes que has pasado del resultado esperado sale el texto abajo.
    – phpMyGuel
    Commented el 17 jul. 2019 a las 11:26
  • perdon no nos hemos entendido ese es el resultado actual, osea mal, yo quiero que salga todo como en la primera foto y segun vayas reduciendo se vaya haciendo mas pequeño el texto y la imagen hasta que a los 900px simplemente oculte un menu y muestre otro, cosa que ahora me hace simplemente que el texto me lo amontona tanto el de "cabecera de prueba" como el menu horizontal
    – KeTeMeTo
    Commented el 17 jul. 2019 a las 11:29
  • Modifiqué un par de cosillas. No haría falta reducir el tamaño del logo y del texto si lo dejas a un tamaño aceptable. Aun así, si necesitaras hacerlo lo único que tendrías que hacer es modificar el width de la imagen y el font-size del texto usando una mediaquerie al tamaño que quieras que se aplique.
    – phpMyGuel
    Commented el 17 jul. 2019 a las 11:40

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.