• 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)
  • Hi,

    can you better explain “But it doesen’t work good” ?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You need to show us the Webpage with the problem.

    Thread Starter fredericbdr

    (@fredericbdr)

    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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you emulate the problem in JSFiddle? jsfiddle.net

    Thread Starter fredericbdr

    (@fredericbdr)

    I don’t know how to use it…
    But can you tell me please if my wp_nav_menu is correct ?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Yes it’s correct.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    For us to debug this without seeing the problem is probably more time consuming than for you to learn how to use JSFiddle.

    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.