Problème avec le menu de navigation mobile avec la fonction wp_nav_menu() dans WordPress
Voici le problème. Je crée un thème dans WordPress et j’ai des problèmes avec le menu de navigation dynamique sur les appareils mobiles.
Voici le code que j’utilise :
<nav id="primary-menu" class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" href="#page">
<img class="logo-dark" src="<?php bloginfo( 'stylesheet_directory' ); ?>/assets/images/logo/logo-dark.png" alt="appy Logo">
<img class="logo-light" src="<?php bloginfo( 'stylesheet_directory' ); ?>/assets/images/logo/logo-light.png" alt="appy Logo">
</a>
</div>
<?php
wp_nav_menu (array (
'theme_location' => 'menu-1',
'container' => 'nav',
'container_class' => 'collapse navbar-collapse pull-right',
'menu_id' => 'navbar-collapse-1',
'menu_class' => 'nav navbar-nav nav-pos-right navbar-left nav-split',
));
?>
<!--<div class="collapse navbar-collapse pull-right" id="navbar-collapse-1">
<ul class="nav navbar-nav nav-pos-right navbar-left nav-split">
<li class="active"><a data-scroll="scrollTo" href="#slider">home</a>
</li>
<li><a data-scroll="scrollTo" href="#feature2">feature</a>
</li>
<li><a data-scroll="scrollTo" href="#banner">author</a>
</li>
<li><a data-scroll="scrollTo" href="#reviews">reviews</a>
</li>
<li><a data-scroll="scrollTo" href="#pricing">pricing</a>
</li>
<li><a data-scroll="scrollTo" href="#cta">download</a>
</li>
</ul>
</div> -->
<!--/.nav-collapse -->
</div>
</nav>
Menu dans le fichier functions.php :
register_nav_menus( array(
'menu-1' => esc_html__( 'Primary', 'bookfolio' )
) );
add_action( 'after_setup_theme', 'bookfolio_setup' );
J’ai mis le code HTML dans le commentaire pour que vous puissiez voir à quoi ça ressemble.
La version de bureau fonctionne parfaitement, mais le problème concerne les appareils mobiles.
Solution n°1 trouvée
Vous devez utiliser un marcheur personnalisé pour afficher le menu dans le bootstrap CSS https://github.com/dupkey/bs4navwalker
0 commentaire