0

The theme I am creating is not working correctly. The menu is not collapsing into mobile view with the hamburger icon when I decrease screen size. I can see all the classes when using the inspect tool on Chrome.

What I have tried:

  1. Compared the code to a theme I made as exercise and it looks exactly the same.
  2. Pasted the navbar example from bootstrap directly and tested(didn't collapse either).
  3. Used the links on bootstrap like https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css and https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js to make use of the styling and functionality.
  4. Downloaded the bootstrap files and linked it locally.

Please see my header.php and functions.php below:

Header.php

<!DOCTYPE html>
<head>
    <title></title>


    <?php wp_head(); ?>
</head>


<body <?php body_class(); ?>>

   <nav class="navbar navbar-default navbar-fixed-top <?php admin_bar_menu(); ?>">
        <div class="container-fluid menu-container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-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="navbar-brand" href="<?php echo esc_url( home_url('/')); ?>"><?php bloginfo( 'name' ); ?></a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

              <?php

                wp_nav_menu(array(

                    'theme_location' => 'primary',
                    'menu_class' => 'nav navbar-nav navbar-right',
                    'fallback_cb' => false

                ));

                ?>

            </div>

        </div>
   </nav>

Functions.php

<?php

function winetours_scripts() {

    wp_enqueue_script( "bootstrap-js", get_template_directory_uri() . "/bootstrap/js/bootstrap.min.js", array("jquery") );
    wp_enqueue_style( "bootstrap", get_template_directory_uri() . "/bootstrap/css/bootstrap.min.css");
    wp_enqueue_style( "winetour-style" , get_stylesheet_uri() );

}

add_action("wp_enqueue_scripts", "winetours_scripts");



    function winetours_setup() {

        register_nav_menus( array(

            "primary" => "Primary Menu", "winetour"

        ));

        //Add theme support for document title tag
        add_theme_support( "title-tag" );
    }





add_action( "after_setup_theme", "winetours_setup");

//Adds the padding to the top of menu for logged in with toolbar
function admin_bar_menu() {

    if ( is_user_logged_in() ){

        $current_user = wp_get_current_user();
        if (user_can( $current_user, 'administrator' )) {
          echo "admin-nav";
        }


    }
}
0

I found the error. It is the inspect tool of Google Chrome that is broken. When viewing the device toolbar and checking on different screen size it doesn't work. It only works when you manually resize the window without the device toolbar activated.

0

I have also face down such kind of problem. I have solved this problem by using wp-bootstrap-navwalker or you can create yourself click for details

enqueue your js file in the footer by setting last parameter true.

wp_enqueue_script( "bootstrap-js", get_template_directory_uri() . "/bootstrap/js/bootstrap.min.js", array("jquery") 'here your theme version', TRUE );

now check that you call wp_footer(); function in footer section of the theme. if you are using wp-bootstrap navwalker then update you wp_nav_menu function with flowing code

<?php
            wp_nav_menu( array(
                'menu'              => 'primary',
                'theme_location'    => 'primary',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse',
                'container_id'      => 'bs-example-navbar-collapse-1',
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                'walker'            => new WP_Bootstrap_Navwalker())
            );
        ?>
  • The walker works for the dropdowns but it didn't fix the responsiveness. My footer.php contains wp_footer(); – Feyt Nov 12 '17 at 17:49
  • then provide me your wp_nav_menu() function code also the html code that you want to convert in wp – Kanon Chowdhury Nov 12 '17 at 17:58
  • The wp_nav_menu() is in the header.php above with the HTML structure from bootstrap. – Feyt Nov 13 '17 at 6:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.