Pregunta sobre Developing with WordPress de Wordpress:

Problema con la palanca de navegación de bootstrap

Un usuario preguntó 👇

Hola,

Utilizo mi tema en localhost y hay un error con la navegación receptiva y la alternancia de CSS (creo). Aquí está el código html de mi menú:

<nav class="main-menu">
                                <div class="navbar-header">
                                    <!-- Toggle Button -->
                                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                </button>
                                </div>

                                <div class="navbar-collapse collapse clearfix">
                                    <ul class="navigation clearfix">
                                        <li class="current"><a href="index.html">Home</a></li>
                                        <li><a href="project.html">Project</a></li>
                                        <li><a href="partners.html">Partners</a></li>
                                        <li><a href="people.html">People</a></li>
                                        <li><a href="news.html">News</a></li>
                                        
                                    </ul>
                                </div>
                            </nav>

Y esto es lo que uso en wordpress:

<nav class="main-menu">
                                <div class="navbar-header">
                                    <!-- Toggle Button -->
                                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                    </button>
                                </div>
                                <div class="navbar-collapse collapse clearfix">
                                
                                <?php
                                    wp_nav_menu( array(
                                        'theme_location'    => 'menu-1',
                                        
                                        'menu_class'        => 'navigation clearfix',
                                        'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                                        'walker'            => new WP_Bootstrap_Navwalker())
                                            );
                                ?>
                                
                                </div>
                            </nav>

Pero no funciona bien, agregué functions.php:

require_once get_template_directory() . '/wp-bootstrap-navwalker.php';
		register_nav_menus( array(
			'menu-1' => esc_html__( 'Primary', 'visionitn' ),
		) );

Con todos los archivos CSS en su lugar:

function add_theme_scripts() {
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.css');
wp_enqueue_style( 'revolution-slider', get_template_directory_uri() . '/assets/css/revolution-slider.css');
wp_enqueue_style( 'slider-setting', get_template_directory_uri() . '/assets/css/slider-setting.css');
wp_enqueue_style( 'responsive', get_template_directory_uri() . '/assets/css/responsive.css');
wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/assets/css/font-awesome.css');
wp_enqueue_style( 'flaticon', get_template_directory_uri() . '/assets/css/flaticon.css');
wp_enqueue_style( 'animate', get_template_directory_uri() . '/assets/css/animate.css');
wp_enqueue_style( 'owl', get_template_directory_uri() . '/assets/css/owl.css');
wp_enqueue_style( 'jquery.fancybox', get_template_directory_uri() . '/assets/css/jquery.fancybox.css');
wp_enqueue_style( 'jquery.mCustomScrollbar.min', get_template_directory_uri() . '/assets/css/jquery.mCustomScrollbar.min.css');
 
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

Por favor 🙂

Gracias.

(@ agm65)

Hace 2 años, 9 meses

Hola,

¿Puede explicar mejor «Pero no funciona bien»?

(@anevins)

Donante de WCLDN 2018 Apoyo voluntario

Hace 2 años, 9 meses

Necesita la página web para mostrarnos el problema.

(@fredericbdr)

Hace 2 años, 9 meses

De acuerdo, no puedo mostrarte, está solo en localhost. ¿Se pueden agregar imágenes aquí? El problema es que el botón de alternancia no funciona en comparación con mi plantilla html estática cuando reduces la pantalla a la resolución móvil. Y el tamaño de fuente en mi página web es pequeño que en mi plantilla estática. También tengo un CSS sensible que no funciona.

(@anevins)

Donante de WCLDN 2018 Apoyo voluntario

Hace 2 años, 9 meses

¿Puedes recitar el problema en JSFiddle? jsfiddle.net

(@fredericbdr)

Hace 2 años, 9 meses

No sé cómo usarlo … ¿Pero podría decirme si mi wp_nav_menu es correcto?

(@anevins)

Donante de WCLDN 2018 Apoyo voluntario

Hace 2 años, 9 meses

Si esta correcto.

(@anevins)

Donante de WCLDN 2018 Apoyo voluntario

Hace 2 años, 9 meses

Probablemente nos lleve más tiempo depurar esto sin ver el problema de lo que aprenderá a usar JSFiddle.

(@jaycbrf)

Hace 2 años, 9 meses

¿Olvidé cargar Bootstrap.js? ¿No lo veo en su función de cola? ¡El js es lo que controla el cambio de hamburguesa!

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *