Bootstrap, WordPress y NavWalker: los enlaces de navegación de nivel superior no funcionan

3 minutos de lectura

Me doy cuenta de que este problema se ha abordado en otras publicaciones; sin embargo, tengo problemas con los enlaces de navegación superiores que no funcionan. este sitio.

Este es un sitio de WordPress construido en BootStrap 3 y usando NavWalker para integrar la navegación de WordPress en la estructura de Bootstrap. Aquí está el código de navegación:

 <div class="navbar navbar-default col-md-9" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

        </div>
        <?php
                        wp_nav_menu( array(
                        'menu'                    => 'Primary',
                        'theme_location'    => 'Primary',
                        'depth'                   => 2,
                        'container'             => 'div',
                        'container_class'    => 'collapse navbar-collapse col-md-9',
                        'container_id'        => 'none',
                        'menu_class'         => 'nav navbar-nav',
                        'fallback_cb'         => 'wp_bootstrap_navwalker::fallback',
                        'walker'                => new wp_bootstrap_navwalker())
                        );
                    ?> 
        </div><!-- /.container -->
</div><!-- /.navbar -->

Esto inherentemente carece de la función de desplazamiento que es bueno tener en los menús desplegables. He abordado esto con la siguiente solución de wpeden:

( function( $ ) {
jQuery(function($) {
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();

}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();

});

$('.navbar .dropdown > a').click(function(){
location.href = this.href;
});

});
} )( jQuery );

Esto hace un muy buen trabajo al mostrar con gracia la navegación desplegable, pero no hay enlaces activos en los elementos del menú principal.

He confirmado que los padres en realidad tienen enlaces activos al sacarlos de la jerarquía de navegación sin hijos donde muestran los enlaces correctamente, por lo que falta algo que no puedo identificar y agradecería un ojo atento o dos para ayudar. detectarlo.

  • ¿A qué te refieres con enlaces activos? Veo que los menús se cargan directamente con href="#"

    – Spokey

    28/10/2014 a las 15:16


  • Hola Spokey, ese es el problema. Algo está eliminando el enlace y me queda # para los enlaces. Como se indicó anteriormente, si muevo el elemento de navegación a una posición sin elementos secundarios, como Contacto, los enlaces aparecen correctamente. Pero tan pronto como tiene hijos, el enlace se elimina.

    – para descanso

    28/10/2014 a las 15:23

NavWalker parece estar diseñado así. Necesitas editar el código fuente en wp_bootstrap_navwalker.php en línea #85.

Hacer que el padre guarde el href aunque tenga hijos

if ( $args->has_children && $depth === 0 ) {
    // $atts['href']        = '#'; // old line
    $atts['href'] = ! empty( $item->url ) ? $item->url : ''; // new line
    $atts['data-toggle']    = 'dropdown';
    $atts['class']          = 'dropdown-toggle';
    $atts['aria-haspopup']  = 'true';
} else {
    $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

  • Lo acabo de probar y funciona perfectamente. ¡Gracias por la ayuda!

    – para descanso

    28/10/2014 a las 15:34

  • Eso funciona para el escritorio, pero la versión móvil del menú no funciona desde que eliminamos el menú desplegable

    – Mitrovic Srjan

    13 dic 2016 a las 23:35

  • No resolvió mi problema, cuando paso el mouse sobre el elemento, aparece el enlace… pero aún no se puede hacer clic, solo hace que la lista desplegable se expanda y colapse, ¿algún consejo? Gracias

    – Alex

    5 de febrero de 2017 a las 11:31

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad