Navwalker menu not working in mobile version

Laure2020 commented 4 years ago

Here is the code for my header:

<!DOCTYPE html> <html <?php language_attributes(); ?>>

<?php wp_title(''); ?>

And my functions.php:

<?php

if ( ! isset( $content_width ) ) { $content_width = 660; }

function KeyGhanawp_setup() {

  add_theme_support( 'automatic-feed-links' );
  add_theme_support( 'title-tag' );

// Register Naviigation Walker

require_once('class-wp-bootstrap-navwalker.php');

register_nav_menus( array( 'primary' => __( 'primary menu', 'KeyGhana' ), ) );

}

add_action( 'after_setup_theme', 'KeyGhanawp_setup' );

function KeyGhana_scripts() { / add styles / wp_enqueue_style( 'bootstrap-core', get_template_directory_uri() . '/css/bootstrap.min.css' ); wp_enqueue_style( 'custom', get_template_directory_uri() . '/style.css' ); / add scripts / wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jqurey'), true );

if ( is_singular() ) wp_enqueue_script( 'comment-reply' );

} add_action( 'wp_enqueue_scripts', 'KeyGhana_scripts' );

function new_excerpt_more( $more ) { return '...';
} add_filter( 'excerpt_more', 'new_excerpt_more' );

/**

Register our sidebars and widgetized areas.
*/ function arphabet_widgets_init() {

register_sidebar( array( 'name' => 'sidebar', 'id' => 'sidebar_blog', 'before_widget' => '
', 'after_widget' => '
', 'before_title' => '
', 'after_title' => '
', ) );

} add_action( 'widgets_init', 'arphabet_widgets_init' );

function featureText() { if ( is_front_page() ) { _e("EVENTS, ATTRACTIONS AND WHAT'S ON IN ACCRA"); } elseif( is_home() ) { _e('MUSIC AND NIGHTLIFE'); } }

?>

Steps to reproduce the issue:

What I expected:

What happened instead:

pattonwebz commented 4 years ago

If you have an online demo site where someone could see how this code generates it's output that would make it easier to help diagnose this.

Most of the time when mobile nav fails to work it is caused by missing bootstrap.js, popper.js or jQuery. I see you have bootstrap.js and jQuery here as enqueues but no popper.

Also check in the console and see if there are any JS errors that could be breaking the behaviours.

Laure2020 commented 4 years ago

Thank you for the input. This is the demo site: http://visitingmilwaukee.com

pattonwebz commented 4 years ago

I don't see the bootstrap.js file being output to your page so maybe there is something wrong with where you run the wp_enqueue_script() for it?

Also I notice the bootstrap css is a v3 branch. The main repo here is for bootstrap v4 - the walker for v3 can be found here but it is very outdated: https://github.com/wp-bootstrap/wp-bootstrap-navwalker/tree/v3-branch

If you are building this site/theme new then I would suggest you upgrade to boostrap v4 since the version I see on the demo page is about 5 years old :s

Laure2020 commented 4 years ago

Ok, let me try to figure this out and upgrade to the v4 version. Thank you so much.

liukang93 commented 4 years ago

Can someone explain this code?

liukang93 commented 4 years ago

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="true" aria-label="<?php esc_attr_e( 'Toggle navigation', 'your-theme-slug' ); ?>">
            <span class="navbar-toggler-icon"></span>
        </button>

liukang93 commented 4 years ago

what's esc_attr_e( 'Toggle navigation', 'your-theme-slug' ); ?

IanDelMar commented 3 years ago

@liukang93 esc_attr is a WordPress function that returns escaped attributes. esc_attr_e is the same but it let's you translate the attribute value and echos it.

You may want to have a look at https://developer.wordpress.org/reference/functions/esc_attr/.

IanDelMar commented 3 years ago

@Laure2020 were you able to solve the issue?

IanDelMar commented 3 years ago

Based on the lack of feedback and the time that has passed since the issue has been opened, I assume that you were able to sort this out @Laure2020. If that is not the case, please feel free to re-open the issue.

wp-bootstrap / wp-bootstrap-navwalker