I'm trying to show a navbar over a carousel within wordpress. To achive this I'm using 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(), 

I'm trying to show a navbar over a carousel within wordpress. To achive this I'm using WP Bootstrap Navwalker (https://github/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(), 

• menus
• navigation
• twitter-bootstrap

Share Improve this question asked Jul 8, 2019 at 18:54 SaintCoreSaintCore 122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.