Title: Problem with bootstrap nav toggle
Last modified: February 1, 2018

---

# Problem with bootstrap nav toggle

 *  [fredericbdr](https://wordpress.org/support/users/fredericbdr/)
 * (@fredericbdr)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/problem-with-bootstrap-nav-toggle/)
 * Hi everybody,
 * I use my theme in localhost and there is a bug with nav toggle and responsive
   css (i believe).
    Here is the html code for my menu :
 *     ```
       <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>
       ```
   
 * And here is what i use in 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>
       ```
   
 * But it doesen’t work good, i put in functions.php :
 *     ```
       require_once get_template_directory() . '/wp-bootstrap-navwalker.php';
       		register_nav_menus( array(
       			'menu-1' => esc_html__( 'Primary', 'visionitn' ),
       		) );
       ```
   
 * And all css files in a function:
 *     ```
       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' );
       ```
   
 * Please 🙂
 * Thank you.

Viewing 8 replies - 1 through 8 (of 8 total)

 *  [Diego Betto](https://wordpress.org/support/users/agm65/)
 * (@agm65)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/problem-with-bootstrap-nav-toggle/#post-9926004)
 * Hi,
 * can you better explain “But it doesen’t work good” ?
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years, 3 months ago](https://wordpress.org/support/topic/problem-with-bootstrap-nav-toggle/#post-9926298)
 * You need to show us the Webpage with the problem.
 *  Thread Starter [fredericbdr](https://wordpress.org/support/users/fredericbdr/)
 * (@fredericbdr)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/problem-with-bootstrap-nav-toggle/#post-9926338)
 * Ok, i cannot show you, it is only on localhost.
    Is it possible to add images
   here ? The problem is that toggle button does not work compare to my static html
   template when you reduce the screen to mobile resolution. And the font size of
   my web page is little more bigger than on my static template. I have also some
   responsive css who doesn’t work.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years, 3 months ago](https://wordpress.org/support/topic/problem-with-bootstrap-nav-toggle/#post-9926443)
 * Can you emulate the problem in JSFiddle? jsfiddle.net
 *  Thread Starter [fredericbdr](https://wordpress.org/support/users/fredericbdr/)
 * (@fredericbdr)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/problem-with-bootstrap-nav-toggle/#post-9926468)
 * I don’t know how to use it…
    But can you tell me please if my wp_nav_menu is 
   correct ?
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years, 3 months ago](https://wordpress.org/support/topic/problem-with-bootstrap-nav-toggle/#post-9926483)
 * Yes it’s correct.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years, 3 months ago](https://wordpress.org/support/topic/problem-with-bootstrap-nav-toggle/#post-9926497)
 * For us to debug this without seeing the problem is probably more time consuming
   than for you to learn how to use JSFiddle.
 *  [HudsonValleyWebDesign](https://wordpress.org/support/users/jaycbrf/)
 * (@jaycbrf)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/problem-with-bootstrap-nav-toggle/#post-9931448)
 * Did you forget to load Bootstrap.js I do not see it in your enqueue function?
   The js is what controls the hamburger toggle!

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Problem with bootstrap nav toggle’ is closed to new replies.

## Tags

 * [nav](https://wordpress.org/support/topic-tag/nav/)
 * [toggle](https://wordpress.org/support/topic-tag/toggle/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 8 replies
 * 4 participants
 * Last reply from: [HudsonValleyWebDesign](https://wordpress.org/support/users/jaycbrf/)
 * Last activity: [8 years, 3 months ago](https://wordpress.org/support/topic/problem-with-bootstrap-nav-toggle/#post-9931448)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics