Eres mi última esperanza <3

Estoy tratando de hacer 2 soluciones, pero ninguna de ellas funciona. (Y perdón por mi mal inglés)

Aquí está el Bootply : http://www.bootply.com/2aDcL7pYQZ

Como puede ver, tengo 2 barras de navegación. Estoy tratando de hacer 2 soluciones cuando cambia el tamaño de la ventana para "Smartphone" (porque el sitio web se duplicará con esos 2 efectos) .

Primera solución:

First Solution

Reemplace los enlaces "Faire un don" y "Recrutement" con los glifos FontAwesome junto a Youtube ... Pero no funciona en absoluto, probé todas las posiciones (absoluta, ...) y para cambiar la visualización (en línea, en línea -bloque) ninguno de ellos funciona. Y para ser honesto, ni siquiera sé cómo cambiarlo :(

Segunda solución:

Second Solution

Mueva esos dos enlaces en la otra barra de navegación. Aquí hay un Bootply que funciona muy bien: http://www.bootply.com/106921 (Lo encontré en StackOverflow) Lo probé y muchos otros y todavía no funciona ... Simplemente borra mis enlaces.

Muchas gracias por su ayuda !

1
Pierrou 13 may. 2016 a las 22:39

3 respuestas

La mejor respuesta

La mejor manera es usar las utilidades, por ejemplo, agregue esto a su mini menú para ocultarlas en pantallas pequeñas:

.hidden-xs

Para el menú más grande use

.visible-xs-block o .visible-xs-inline dependiendo de cómo esté configurado su menú

http://getbootstrap.com/css/#responsive-utilities

2
David Nguyen 13 may. 2016 a las 20:50

Yo tambien soy frances Pero estoy en StackOverFlow para mejorar mi inglés, ¡así que intentaré ayudarte en inglés! (Seguramente muchos errores).

Creo que puedes usar esta solución:

Primeramente :

<div class="littleMenu">
    <a href="#" class="icon-button youtube">
        <i class="fa fa-youtube-play"></i>
           <span></span>
    </a>
    <a href="#" class="icon-button youtube">
        <i class="fa fa-youtube-play"></i>
           <span></span>
    </a>
</div>

En segundo lugar:

Ocultar botones de iconos en el CSS naturalmente:

.littleMenu{
    display:none;
}

En tercer lugar:

Use las funciones javascript / jquery para ocultarlas / mostrarlas cuando el documento esté listo o para cambiar el tamaño como lo hago yo:

$(document).ready(function() {

    if ($(window).width() <= 800){  
        $('#menu').hide();
        $('#menu2').show();       
    }   
    else if ($(window).width() > 800){  
        $('#menu').show();
        $('#menu2').hide();
        $('#menu3').hide();
    }     
});

Y

//----------- Resize ------------//
$(window).resize(function(){
    if ($(window).width() <= 800){  
        $('#menu').hide();
        $('#menu2').show();
    }
    if ($(window).width() > 800){   
        $('#menu').show();
        $('#menu2').hide();
        $('#menu3').hide();
    }

});

Use el mismo sistema para la segunda solución.

Con la esperanza de que te ayude.

Mantenme informada

0
Jobel 13 may. 2016 a las 20:37

Si solo desea ocultar o mostrar elementos basados en el ancho, puede usar las clases bootstrap

visible-xs : visible only in mobile (hidden for all other sizes)
hidden-xs : hide only in mobile (visible for all other sizes)
1
Lahar Shah 13 may. 2016 a las 21:02