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"; } } }
Improve this question

2 Answers 2

Reset to default
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.

Improve this answer
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()) ); ?>
Improve this answer
3
  • The walker works for the dropdowns but it didn't fix the responsiveness. My footer.php contains wp_footer(); Commented Nov 12, 2017 at 17:49
  • then provide me your wp_nav_menu() function code also the html code that you want to convert in wp Commented Nov 12, 2017 at 17:58
  • The wp_nav_menu() is in the header.php above with the HTML structure from bootstrap. Commented Nov 13, 2017 at 6:07

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.