Hi everyone,

I am currently doing a seminar on web development. I have never done web development before so please bare with me – I am a complete noob…

I am currently trying to implement the Bootstrap Navwalker (see here: https://github.com/wp-bootstrap/wp-bootstrap-navwalker) in my wordpress files with the latest Bootstrap version 5.0.0. However, there seems to be an issue with the Navwalker when using this Bootstrap version. Everything works the way it should on desktop. However, on small screens or mobile, the dropdown doesn’t drop down (it that makes sense). I am attaching a picture – basically, if I click on the circled button nothing from the nav comes down and I can’t click any sites.

r/webdev - WordPress Bootstrap Navwalker with Bootstrap 5.0.0 - dropdown does not drop down on small screens/mobile?

I’ve tried looking around on the internet but haven’t found a solution that works yet. I have tried changing all the data attributes in my header.php file to “data-bs-” like it’s suggested here: https://wordpress.stackexchange.com/questions/383286/why-is-my-bootstrap-5-navbar-not-displaying-the-drop-down-menu-on-smaller-screen – didn’t work. I have also tried using this solution with the functions.php and header.php file: https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker – didn’t work either.

So my question is – could anyone help me here or have any of you used one of these solutions and they worked? I would like to work with Bootstrap 5 if possible because that’s what I just learned 2 weeks ago.

This is my current functions.php code:

<?php

function theme_add_bootstrap() {
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css' );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '5.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );


function register_navwalker(){
	require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );


function wpb_custom_new_menu() {
  register_nav_menu('primary',__( 'Hauptmenu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );
 
?>

And this is my current header.php file in case this helps:

<!DOCTYPE html >
<html lang="de">
	<head>
		<title><?php wp_title(' - ', true, 'right'); bloginfo('name'); ?></title>
		<meta charset='utf-8'>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
		<?php wp_head(); ?>
		</head>
		<body>
	<header>
<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'your-theme-slug' ); ?>">
        <span class="navbar-toggler-icon"></span>
    </button>

    <a class="navbar-brand" href="#">Ginas website</a>
        <?php
        wp_nav_menu( array(
            '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(),
        ) );
        ?>
    </div>
</nav>
	</header>

The rest is currently just extremely barebones as I am just learning how to build it and customise it.



Source link

Write A Comment