navigation - WP Bootstrap Nav (not JS, not missing ID)

admin管理员组

文章数量:1022880

For clarification: I'm using a bs4 navwalker, and Bootstrap 4.

Creating a WP Theme from scratch, so I'm learning, and experimenting. I've spent a few hours reading through a variety of issues regarding mine, but couldn't find a specific answer to help with my issue.

So, the WP instance has bootstrap installed and I have the nav-walker set up correctly. I can tell it's set up correctly because 'nav-item' and 'nav-link' appears in my menu as classes on their respective elements.

The JS file for Bootstrap is installed correctly (no errors in Console except the typical 'TypeError: $ is undefined').

The CSS file for Bootstrap is installed correctly (styles work).

When on mobile, the toggler doesn't work. I click on it, and it doesn't appear. I thought at first that the ID didn't match, or that the JS wasn't installed correctly. They both are correct.

I would share the site, but it is on a localhost.

Please help.

Here is the code:

      <div id="tophead">
            <div id="container">
                <nav class="navbar navbar-expand-lg">
                    <a class="navbar-brand" href="<?php echo esc_url( home_url('/') ); ?>">
                        <?php echo the_custom_logo(); ?>
                    </a>

                    <button class="navbar-toggler navbar-dark" type="button" 
                            data-toggle="collapse" data-target="#primary"             
                            aria-controls="primary" aria-expanded="false" 
                            aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <?php
                    wp_nav_menu([
                        'menu'            => 'primary',
                        'theme_location'  => 'primary',
                        'container'       => 'div',
                        'container_id'    => 'primary',
                        'container_class' => 'collapse navbar-collapse',
                        'menu_id'         => false,
                        'menu_class'      => 'navbar-nav mr-auto',
                        'items_wrap'      => '<ul id="%1$s" class="%2$s" role="menu">%3$s</ul>',
                        'depth'           => 0,
                        'fallback_cb'     => 'bs4navwalker::fallback',
                        'walker'          => new bs4navwalker()
                    ]);
                    ?>
                </nav>
            </div>
        </div> 

This is in the function.php:

function scripts(){
    wp_enqueue_style( 'bootstrap', get_template_directory_uri()
        . '/includes/bootstrap/css/bootstrap.css' );
    wp_enqueue_style( 'fontawesome', get_template_directory_uri()
        . '/includes/fontawesome/css/all.min.css' );
    wp_enqueue_style( 'montserrat', get_template_directory() 
        . "");
    wp_enqueue_style( 'style', get_stylesheet_uri() );

    wp_enqueue_script( 'bootstrap', get_template_directory_uri() 
        . '/includes/bootstrap/js/bootstrap.js', true );

}

add_action( 'init', 'scripts' );

For clarification: I'm using a bs4 navwalker, and Bootstrap 4.

Creating a WP Theme from scratch, so I'm learning, and experimenting. I've spent a few hours reading through a variety of issues regarding mine, but couldn't find a specific answer to help with my issue.

So, the WP instance has bootstrap installed and I have the nav-walker set up correctly. I can tell it's set up correctly because 'nav-item' and 'nav-link' appears in my menu as classes on their respective elements.

The JS file for Bootstrap is installed correctly (no errors in Console except the typical 'TypeError: $ is undefined').

The CSS file for Bootstrap is installed correctly (styles work).

When on mobile, the toggler doesn't work. I click on it, and it doesn't appear. I thought at first that the ID didn't match, or that the JS wasn't installed correctly. They both are correct.

I would share the site, but it is on a localhost.

Please help.

Here is the code:

      <div id="tophead">
            <div id="container">
                <nav class="navbar navbar-expand-lg">
                    <a class="navbar-brand" href="<?php echo esc_url( home_url('/') ); ?>">
                        <?php echo the_custom_logo(); ?>
                    </a>

                    <button class="navbar-toggler navbar-dark" type="button" 
                            data-toggle="collapse" data-target="#primary"             
                            aria-controls="primary" aria-expanded="false" 
                            aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <?php
                    wp_nav_menu([
                        'menu'            => 'primary',
                        'theme_location'  => 'primary',
                        'container'       => 'div',
                        'container_id'    => 'primary',
                        'container_class' => 'collapse navbar-collapse',
                        'menu_id'         => false,
                        'menu_class'      => 'navbar-nav mr-auto',
                        'items_wrap'      => '<ul id="%1$s" class="%2$s" role="menu">%3$s</ul>',
                        'depth'           => 0,
                        'fallback_cb'     => 'bs4navwalker::fallback',
                        'walker'          => new bs4navwalker()
                    ]);
                    ?>
                </nav>
            </div>
        </div> 

This is in the function.php:

function scripts(){
    wp_enqueue_style( 'bootstrap', get_template_directory_uri()
        . '/includes/bootstrap/css/bootstrap.css' );
    wp_enqueue_style( 'fontawesome', get_template_directory_uri()
        . '/includes/fontawesome/css/all.min.css' );
    wp_enqueue_style( 'montserrat', get_template_directory() 
        . "");
    wp_enqueue_style( 'style', get_stylesheet_uri() );

    wp_enqueue_script( 'bootstrap', get_template_directory_uri() 
        . '/includes/bootstrap/js/bootstrap.js', true );

}

add_action( 'init', 'scripts' );

本文标签： navigationWP Bootstrap Nav (not JSnot missing ID)