Bootstrap - Menu Doesn't Work Well

I'm implementing a bootstrap menu based on css shapes and i'm having problems to display sub-menus i think it is because i have a fixed div in shape div. I'm using wordpress with

Solution 1:

Try this out:

<?phpif ( has_nav_menu( 'primary' ) ) {
        wp_nav_menu(
        array(
                'theme_location'  => 'primary',
                'menu'            => '',
                'container'       => 'nav',
                'container_class' => 'collapse navbar-collapse',
                'container_id'    => 'bs-example-navbar-collapse-1',
                'menu_class'      => 'nav navbar-nav navbar-right',
                'menu_id'         => 'navigation',
                'echo'            => true,
                 'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                 'walker'            => new wp_bootstrap_navwalker,
                'before'          => '',
                'after'           => '',
                'link_before'     => '',
                'link_after'      => '',
                'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
                'depth'           => 0,
            )
        );
    } else {
        wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => '' ) );
    }
?>

I just adapt my setup by your data. Generaly, you need to define items_wrap to get results you need.

And also change container_id (wp_bootstrap_navwalker) to something more natural.

Also from SEO side if you follow HTML5 rules, use <nav> tag. That also follow Bootstrap rules