Empezar un tema nuevo

Añadir botón home en header comprimido

Buenos días,

¿sería posible incluir un enlace a la página de inicio en el header de la aplicación cuando está comprimida en pantallas móviles?


image


1 comentario

Hola Fran Quero,
Podrías sobrescribir la función estándar del control de navegación de flexygo para añadir más botones añadiéndote un JS al proyecto que se ejecute después del estándar con un código similar a este:


flexygo.ui.wc.FlxNavElement.prototype.setAdditionalButtons = function(mode){
    let<span class="fr-marker" data-id="0" data-type="false" style="display: none; line-height: 0;"></span><span class="fr-marker" data-id="0" data-type="true" style="display: none; line-height: 0;"></span> header = $('body > header');
    if (mode.toLowerCase() == 'nav' && header.find('#buttonMenu').length == 0 && $('flx-nav#mainMenu').length > 0) {
        header.append('<span id="buttonMenu" onclick="flexygo.nav.toggleMobileMenu()" class="flx-icon icon-bullet-list-3"></span>');
    }

    if (mode.toLowerCase() == 'nav' && header.find('#buttonNav').length == 0 && $('flx-nav#mainNav').length > 0) {
        header.append('<div id="miniButton"><i id="buttonMininNav" class="fa fa-indent flipped" onclick="flexygo.nav.toggleNavBar();" ></i></div>');
        header.append('<span id="buttonNav" onclick="flexygo.nav.toggleMobileNav()" class="flx-icon icon-menu"></span>');
//AÑADIR MÁS BOTONES AQUÍ
    }
}


Para que se muestre o se oculte según el tamaño necesitar añadir un ficheros less con unos estilos de este tipo:



#miBotton {
    display: none;
}

@media (max-width: dbSize(medium)) {
 #miBotton {
        order: 4;
        flex: 0 1 auto;
        margin: 8px;
        font-size: 2.5em;
        float: right;
        cursor: pointer;
        display:flex;
        justify-content:center;
        align-items:center;
    }
}


Un saludo,
Rubén
Iniciar sesión o Registrarse para publicar un comentario