Añadir clase dropdown de Bootstrap a un menú de navegación

Question

Añadir clase dropdown de Bootstrap a un menú de navegación

26 jul 2017, 14:13:22

Vistas: 15.5K

Votos: 2

Cómo construir este menú en WordPress

<div class="collapse navbar-collapse" id="collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">nuestra historia</a></li>
                    <li><a href="#">nuestra visión</a></li>
                    <li class="dropdown">
                        <a href="#">Historia</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Historia 1</a></li>
                            <li><a href="#">Historia 2</a></li>
                            <li><a href="#">Historia 3</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

Código de WordPress:

<div class="collapse navbar-collapse" id="collapse-1">

<?php
wp_nav_menu( array(
    'theme_location' => 'header',
    'menu_class' => 'nav navbar-nav',
    'fallback_cb' => false
) );
?>

</div>

sevoug

21

menús navegación twitter bootstrap

Comentarios

¿Cuál es tu código para construir un menú de navegación sin la clase dropdown?

Max Yudin

26 jul 2017 14:15:30

Revisa este enlace, entenderás la idea. https://codex.wordpress.org/WordPress_Menu_User_Guide

TMA

26 jul 2017 14:16:11

   <?php wp_nav_menu( array( 'theme_location' => 'header', 'menu_class' => 'nav navbar-nav', 'fallback_cb' => false ) ); ?>

            </div>

sevoug

26 jul 2017 14:16:52

Para Bootstrap 5: https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker

Lars Flieger

26 may 2021 14:21:36

Todas las respuestas a la pregunta

Comentarios

¿Sabes si Navwalker funciona con Bootstrap 5?

Lars Flieger

25 may 2021 12:17:25

@Lars No seas tímido. Google es tu amigo. 1, 2 y así sucesivamente.

Max Yudin

27 may 2021 10:04:29

Max Yudin 6.38K · Answer 1 · 2017-07-26T14:42:03Z

La forma más fácil de hacer esto es usar una solución lista para usar. Existe la clase WP_Bootstrap_Navwalker que extiende la clase nativa Walker_Nav_Menu de WordPress y prepara tus menús de navegación para Bootstrap 3 o 4. Descárgala desde GitHub.

Añádela a tu tema y luego agrega lo siguiente al archivo functions.php:

<?php
require_once('ruta-al-directorio/wp-bootstrap-navwalker.php');

Cambia ruta-al-directorio/ según tus necesidades.

A continuación, modifica tu wp_nav_menu() con el siguiente código:

<?php
wp_nav_menu( array(
    'menu'              => 'header', // ajusta el nombre al tuyo
    'theme_location'    => 'header',
    'container'         => 'div', // no es necesario envolver `wp_nav_menu` manualmente
    'container_class'   => 'collapse navbar-collapse',
    'container_id'      => 'collapse-1',
    'menu_class'        => 'nav navbar-nav',
    'fallback_cb'       => false,
    'walker'            => new WP_Bootstrap_Navwalker() // Usa un Walker diferente
));

Ten en cuenta que ya no necesitas el <div class="collapse navbar-collapse" id="collapse-1"> ya que será agregado por wp_nav_menu() con las clases CSS y el id adecuados.

Además, lee detenidamente el archivo README.md de WP_Bootstrap_Navwalker.

Jiwan 41 · Answer 2 · 2018-06-01T17:00:30Z

La solución más sencilla sería usar jQuery en este caso. Puedes agregar una nueva clase en tu archivo functions.php para verificar si el elemento del menú tiene hijos y luego agregar atributos a ese elemento o también puedes usar el bootstrap nav walker. Aquí voy a optar por la opción más fácil.


    $(document).ready(function(){
        $("ul.sub-menu").parent().addClass("dropdown");
        $("ul.sub-menu").addClass("dropdown-menu");
        $("ul#menuid li.dropdown a").addClass("dropdown-toggle");
        $("ul.sub-menu li a").removeClass("dropdown-toggle"); 
        $('.navbar .dropdown-toggle').append('');
        $('a.dropdown-toggle').attr('data-toggle', 'dropdown');
    });

Solo copia y pega esto en tu footer.php. Para más detalles http://webtrickshome.com/faq/how-to-add-bootstrap-dropdown-class-in-wordpress-menu-item

Elidrissi simo 85 · Answer 3 · 2017-07-26T14:38:32Z

Puedes usar la clase Walker_Nav_Menu si quieres modificar el marcado predeterminado del menú de WordPress.

https://codex.wordpress.org/Class_Reference/Walker

https://www.youtube.com/watch?v=IqTMhmjTBoE&list=PLriKzYyLb28kpEnFFi9_vJWPf5-_7d3rX&index=19

Elidrissi simo

85

26 jul 2017 14:38:32