I am unable to set my wordpress menu for mobile version -
i have 2 menus, 1 mobile view, , other desktop view. changing wordpress dynamic menu. mobile menu not working properly, not showing toggle button , proper styles of menu. have following codes in html:
<!-- header --> <header> <div id="search-bar"> <div class="container"> <div class="row"> <form action="#" name="search" class="col-xs-12"> <input type="text" name="search" placeholder="type , hit enter"><i id="search-close" class="fa fa-close"></i> </form> </div> </div> </div> <nav class="navigation"> <div class="container"> <div class="row"> <div class="logo-wrap col-md-3 col-xs-6"> <a href="index.html">workhub</a> </div> <div class="menu-wrap col-md-8 "> <ul class="menu"> <li class="active"> <a href="index.html">home</a> </li> <li> <a href="about-us.html">about us</a> </li> <li> <span>services</span> <ul class="submenu"> <li><a href="services.html">services</a></li> <li><a href="service-single.html" class="active">service detail</a></li> </ul> </li> <li> <a href="gallery.html">gallery</a> </li> <li> <span>news</span> <ul class="submenu"> <li><a href="blog.html">blog</a></li> <li><a href="blog-single.html">blog detail</a></li> </ul> </li> <li> <a href="contact-us.html">contact</a> </li> </ul> </div> <div class="col-md-1 col-xs-6"> <div id="search-toggle"> <i class="fa fa-search"></i> </div> </div> </div> </div> <!--[ mobile-menu-area start ]--> <div class="mobile-menu-area"> <div class="container"> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="mobile-area"> <div class="mobile-menu"> <nav id="mobile-nav"> <ul> <li><a href="index.html">home </a></li> <li><a href="about-us.html"> </a></li> <li><a href="services.html">services</a> <ul class="single"> <li><a href="services.html">services</a></li> <li><a href="service-single.html" class="active">service detail</a></li> </ul> </li> <li><a href="gallery.html"> gallery </a></li> <li><a href="blog.html">news</a> <ul> <li><a href="blog.html">blog</a></li> <li><a href="blog-single.html">blog detail</a></li> </ul> </li> <li><a href="contact-us.html">contact</a></li> </ul> </nav> </div> </div> </div> </div> </div> </div> <!--[ mobile-menu-area end ]--> </nav> </header>
and dynamic code follows:
<header> <div id="search-bar"> <div class="container"> <div class="row"> <form action="#" name="search" class="col-xs-12"> <input type="text" name="search" placeholder="type , hit enter"><i id="search-close" class="fa fa-close"></i> </form> </div> </div> </div> <nav class="navigation"> <div class="container"> <div class="row"> <div class="logo-wrap col-md-3 col-xs-6"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('site-title'); ?></a> </div> <?php wp_nav_menu(array( 'theme_location' => 'primary', 'container' => 'div', 'container_class' => 'menu-wrap col-md-8', 'menu_class' => 'menu' )); ?> <div class="col-md-1 col-xs-6"> <div id="search-toggle"> <i class="fa fa-search"></i> </div> </div> </div> </div> <!--[ mobile-menu-area start ]--> <div class="mobile-menu-area"> <div class="container"> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="mobile-area"> <div class="mobile-menu"> <?php wp_nav_menu(array( 'theme_location' => 'primary', 'container' => 'nav', 'container_class' => 'mobile-nav', )); ?> </div> </div> </div> </div> </div> </div> <!--[ mobile-menu-area end ]--> </nav> </header>
so can mobile menu in proper way. thanking you.
try this:
<?php wp_nav_menu(array( 'theme_location' => 'primary', 'container' => 'div', 'container_id' => 'menu-wrap col-md-8', 'menu_class' => 'menu' )); ?>
Comments
Post a Comment