Navbar is hidden behind carousel when using wp-boostrap-navwalker

Question

I'm trying to show a navbar over a carousel within wordpress. To achive this I'm using WP Bootstrap Navwalker (https://github.com/wp-bootstrap/wp-bootstrap-navwalker)

Without WP Bootstrap Navwalker everything works as expected, beside that the submenu is not collapsing because the id's and classes are not set properly. To set class and id automatically I want to use wp-bootstrap-navwalker. When I integrate it, the navbar is hidden behind the carousel. I can cleary see that the navbar is there, it is just hidden behind the carousel. I've played around with that code-snippet for hours now, without success. Could anyone explain me what I'm doing wrong ? I think I'm missing something important here(I'm quite new to bootstrap)

CSS:

.navbar {
   padding: 0px;
   top: 0;
   z-index: 10;
}

.navbar-wrapper {
   position:absolute;
}

.carousel-inner {
   overflow: hidden;
}

.carousel-inner > .carousel-item > img{
   margin:auto;
   width:100%
}

HTML/PHP :

        <div class="container-fluid">
        <div class="navbar-wrapper">
            <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <!-- The WordPress Primary Menu -->
                <?php wp_nav_menu(
                    array(
                        'theme_location'    => 'header-menu-left',
                        'dept'              => 2,
                        'menu_class'        => 'navbar-nav justify-content-end',
                        'container_class'  => 'collapse navbar-collapse',
                        'container_id'    => 'navbarNav',
                        'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
                         'walker'         => new WP_Bootstrap_Navwalker(), 

                    )
                ); ?>
            </nav>
        </div>
        <div class="row">
            <div class="col">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <?php $slider = get_posts(array('post_type' => 'slider', 'posts_per_page' => 5)); ?>
                        <?php $count = 0; ?>
                        <?php foreach($slider as $slide): ?>
                        <div class="carousel-item <?php echo ($count == 0) ? 'active' : ''; ?>">
                            <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($slide->ID)) ?>" class="img-responsive"/>
                        </div>
                        <?php $count++; ?>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>

Note: If you remove the code below (and the required_once statement in functions.php for class-wp-bootstrap-navwalker.php) it does show the navbar over the carousel.

'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
'walker'          => new WP_Bootstrap_Navwalker(), 

Answer 1

Well figured it out by myself. z-index was set on the wrong element. Add a new class to the container_class property:

<?php wp_nav_menu(
                array(
                    'theme_location'    => 'header-menu-left',
                    'dept'              => 2,
                    'menu_class'        => 'navbar-nav justify-content-end',
                    'container_class'  => 'collapse navbar-collapse YOURCLASS',
                    'container_id'    => 'navbarNav',
                    'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
                     'walker'         => new WP_Bootstrap_Navwalker(), 

                )
            ); ?>

and change the css:

.YOURCLASS {
  padding: 0px;
  top: 0;
  z-index: 10;
}

Note: Before those changes the z-index was set on the navbar itself. To get it work properly you have to set z-index on the container within the navbar. Just to clarify this.