[SOLUCIONADO] Problema con menu

sergiodueso · #1 (**permalink**) 01/03/2018, 04:41

Buenos días. Quiero que mi menú se esconda a los 768px. Y tengo este código:

Código CSS:

Ver original@media (min-width: 767px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Y no funciona. Lo he visto en una página en la que SI que funciona, sólo he cambiado la resolución de 1300px a 768px; Gracias.

DragonX · #2 (**permalink**) 01/03/2018, 08:41

podrás dejar la url del ejemplo de donde tomaste esot por favor.
Slds.-

sergiodueso · #3 (**permalink**) 01/03/2018, 09:26

Os pongo la URL y muchas gracias.
https://www.codeply.com/go/J70zkpygvk

DragonX · #4 (**permalink**) 01/03/2018, 09:41

en el ejemplo que pusiste si reemplazas 1300px en el media por 768px y haces click en 'RUN' anda perfecto. Estas seguro que ningún otro css esta 'molestando' ?

Slds.-

sergiodueso · #5 (**permalink**) 01/03/2018, 10:15

Yo creo que no. Cuando pueda os pongo los css que tengo. Aquí van

<

Código CSS:

Ver originalstyle>
html, body{
height: 100vh;
}
 
.slider-inicio{
background:url("imagenes/fondo1.jpg");
height: 100vh;
background-size: cover;
background-position: center;
}
.fondo-galeria1{
background:url("imagenes/back5.jpg");
height: 100vh;
background-size: cover;
background-position: center;
}
</style>

DragonX · #6 (**permalink**) 01/03/2018, 10:27

tenes el meta viewport en tu <head> seteado?

sergiodueso · #7 (**permalink**) 01/03/2018, 11:10

Os pongo también el meta
meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

DragonX · #8 (**permalink**) 01/03/2018, 11:36

uffff esta dificil. podras crear un pen con todo tu codigo asi lo podemos ver, por favor?
Slds.-

sergiodueso · #9 (**permalink**) 01/03/2018, 11:42

Voy a probar a poner otra cosa. He visto que en bootstrap 4 hay una instrucción así
@media (min-width: @screen-sm-min). Lo pruebo y os cuento. Porque sino, ¿qué puede ser? Y otra cosa, ¿Cómo se crea un pen? Gracias

DragonX · #10 (**permalink**) 01/03/2018, 11:56

https://codepen.io/pen/

un abrazo

Triby · #11 (**permalink**) 01/03/2018, 12:55

Si lo que quieres es que se apliquen cambios de acuerdo al ancho de la ventana, no sería más lógico cambiar min-width por max-width?

DragonX · #12 (**permalink**) 01/03/2018, 13:34

es lo mismo Triby no hay diferencia.

sergiodueso · #13 (**permalink**) 02/03/2018, 02:53

Ya está arreglado chicos. Os cuento, el navbar tiene una clase llamada: navbar-expand y al final le puedes poner sm, md o lg. Yo lo tenía en sm y por mucho que quiesiera que se cerrara el menú a 768px, no podía por esta clase. Lo he cambiado a navbar-expand-md y funciona ok. Muchas gracias a todos. Por cierto y por si alguien le pasa lo mismo, la clase va en esta línea

Código HTML:

Ver original<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">

. Un saludo

DragonX · #14 (**permalink**) 02/03/2018, 06:59

Excelente! no uso bootstrap 4 por eso no pude ver ese detalle.
Slds.-