WP_bootstrap_Navwalker_issue [closed]

Example Bootstrap 4 and WP Bootstrap Navwalker

I would recommend to keep your header.php simple and to put all your logic in functions.php

Also use wp_enqueue_style to enqueue stylesheets and wp_enqueue_script to enqueue JavaScript. This way you don’t break compatibility with other plugins and ensure best practices.

See technical debate on using WordPress Coding Standards: How to add crossorigin and integrity to wp_register_style? (Font Awesome 5) and functions.php not adding css to website?

You need to use after_setup_theme and wp_enqueue_scripts hooks.
These examples are made with Bootstrap 4

Example header.php

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package Advanza-Direct
 */

?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
    <!-- Required meta tags -->
    <meta charset="https://wordpress.stackexchange.com/questions/321515/<?php bloginfo("charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <!-- End required meta tags -->
    <!-- wp_head -->
    <?php wp_head(); ?>
    <!-- End wp_head -->
</head>
<body <?php body_class(); ?>>

<div id="page" class="site">
    <header id="masthead" class="site-header">
        <div id="navigation" class="main-navigation">
            <nav class="navbar navbar-expand-md navbar-dark container">
                <div class="site-branding">
                    <?php
                    // the_custom_logo();
                    wp_theme_name_prefix_custom_logo();
                    ?>
                </div><!-- .site-branding -->

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

                <?php
                wp_nav_menu( array(
                    'theme_location'  => 'primary-menu',
                    'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
                    'container'       => 'div',
                    'container_class' => 'navbar-collapse collapse',
                    'container_id'    => 'navbarCollapse',
                    'menu_class'      => 'navbar-nav ml-auto', // mr-auto = menu left, ml-auto = menu right.
                    'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
                    'walker'          => new WP_Bootstrap_Navwalker(),
                ) );
                ?>
          </nav>
        </div><!-- #site-navigation -->
  </header><!-- #masthead -->

    <div id="content" class="site-content">

Example functions.php

// Register Custom Navigation Walker
if ( ! file_exists( get_template_directory() . '/inc/class-wp-bootstrap-navwalker.php' ) ) {
    // file does not exist... return an error.
    return new WP_Error( 'class-wp-bootstrap-navwalker-missing', __( 'It appears the class-wp-bootstrap-navwalker.php file may be missing.', 'wp-bootstrap-navwalker' ) );
} else {
    // file exists... require it.
    require_once get_template_directory() . '/inc/class-wp-bootstrap-navwalker.php';
}


if ( ! function_exists( 'wp_theme_name_prefix_setup' ) ) {
    /**
     * Sets up theme defaults and registers support for various WordPress features.
     *
     * Note that this function is hooked into the after_setup_theme hook, which
     * runs before the init hook. The init hook is too late for some features, such
     * as indicating support for post thumbnails.
     */
    function wp_theme_name_prefix_setup() {
        /*
         * Make theme available for translation.
         * Translations can be filed in the /languages/ directory.
         * If you're building a theme based on Advanza-Direct, use a find and replace
         * to change 'advanza-direct' to the name of your theme in all the template files.
         */
        load_theme_textdomain( 'wp-theme-name-prefix', get_template_directory() . '/languages' );

        // Add default posts and comments RSS feed links to head.
        add_theme_support( 'automatic-feed-links' );

        /*
         * Let WordPress manage the document title.
         * By adding theme support, we declare that this theme does not use a
         * hard-coded <title> tag in the document head, and expect WordPress to
         * provide it for us.
         */
        add_theme_support( 'title-tag' );

        /*
         * Enable support for Post Thumbnails on posts and pages.
         *
         * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
         */
        add_theme_support( 'post-thumbnails' );

        // This theme uses wp_nav_menu() in one location.
        register_nav_menus( array(
            'primary-menu' => esc_html__( 'Primary menu', 'wp-theme-name-prefix' ),
        ) );

        /*
         * Switch default core markup for search form, comment form, and comments
         * to output valid HTML5.
         */
        add_theme_support( 'html5', array(
            'search-form',
            'comment-form',
            'comment-list',
            'gallery',
            'caption',
        ) );

        // Set up the WordPress core custom background feature.
        add_theme_support( 'custom-background', apply_filters( 'wp_theme_name_prefix_custom_background_args', array(
            'default-color' => 'ffffff',
            'default-image' => '',
        ) ) );

        // Add theme support for selective refresh for widgets.
        add_theme_support( 'customize-selective-refresh-widgets' );

        /**
         * Add support for core custom logo.
         *
         * @link https://codex.wordpress.org/Theme_Logo
         */
        add_theme_support( 'custom-logo', array(
            'height'      => 50,
            'width'       => 350,
            'flex-width'  => true,
            'flex-height' => true,
        ) );

        function wp_theme_name_prefix_custom_logo() {
            if ( function_exists( 'the_custom_logo' ) ) {
                the_custom_logo();
            }
        }

        function change_logo_class($html) {
            $html = str_replace( 'custom-logo-link', 'custom-logo-link navbar-brand', $html );
            return $html;
        }
        add_filter( 'get_custom_logo', 'change_logo_class' );

    }
}
add_action( 'after_setup_theme', 'wp_theme_name_prefix_setup' );


/**
 * Enqueue scripts and styles.
 */
function wp_theme_name_prefix_scripts() {
    // Add Bootstrap and Font Awesome CSS
    wp_enqueue_style( 'bootstrap', get_theme_file_uri( '/assets/css/bootstrap.min.css' ), array(), null );
    // wp_enqueue_style( 'fontawesome-style', get_theme_file_uri( '/assets/css/all.css' ), array(), null );

    // Theme stylesheet
    wp_enqueue_style( 'wp-theme-name-prefix', get_stylesheet_uri(), array('bootstrap'), null );

    // Example add Google Fonts
    wp_enqueue_style('google_fonts', 'https://fonts.googleapis.com/css?family=Poppins:300,500,700', array(), null );

    // bootstrap bundle js (Popper.js included)
    wp_enqueue_script( 'bootstrap-bundle-js', get_theme_file_uri( '/assets/js/bootstrap.bundle.min.js' ), array( 'jquery' ), null, true );

    // explanation: https://wordpress.stackexchange.com/questions/211701/what-does-wp-embed-min-js-do-in-wordpress-4-4
    // https://kinsta.com/knowledgebase/disable-embeds-wordpress/
    wp_deregister_script( 'wp-embed' );
    wp_dequeue_script( 'wp-embed' );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'wp_theme_name_prefix_scripts' );