Bootstrap 引导下拉菜单未完全显示

9gm1akwq  于 2023-01-06  发布在  Bootstrap
关注(0)|答案(2)|浏览(227)

我在WordPress中添加了一个引导框架到一个新的主题,我的下拉菜单没有完全显示。我已经尝试了z-index,但仍然什么都没有。有人能帮助我吗?
谢谢!

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid"> <!-- container-fluid -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span> <!-- do not remove these, this will be visible on the mobile devices -->
            <span class="icon-bar"></span> <!-- do not remove these, this will be visible on the mobile devices -->
            <span class="icon-bar"></span> <!-- do not remove these, this will be visible on the mobile devices -->
            </button>
            <a class="navbar-brand" href="<?php bloginfo('url')?>">                
                <img src="<?php echo get_template_directory_uri(); ?>/assets/main_logo.png" alt="beekeeper-design-studio-logo.png" title="Beekeeper Design Studio Logo"/>
            </a>
        </div>
        <div class="navbar-right">
            <?php /* for Bootstrap navbar use this php from -  https://github.com/twittem/wp-bootstrap-navwalker */
                wp_nav_menu( array(
                    // name of the menu which you created in wp admin panel 
                    'menu'              => 'wp-primary-menu',
                    'depth'             => 2,
                    'container'         => 'div',
                    'container_class'   => 'collapse navbar-collapse',
                    'container_id'      => 'bs-example-navbar-collapse-1', // to collapse the navbar in responsive
                    'menu_class'        => 'nav navbar-nav', // ul menu class
                    'walker'            => new wp_bootstrap_navwalker() //Process nav menu using our custom nav walker
                    ));
            ?>                
        </div>
    </div> <!-- container-fluid -->
</nav>

下面是这段代码的HTML输出。

下拉列表没有向前或向后,实际上没有超出导航栏容器。增加导航栏高度显示下拉列表。

i86rm4rw

i86rm4rw1#

01 2023年[更新]

运行正常。问题出在navbar类中的overflow
我把它设置为“溢出:可见“,它现在正在工作。

.navbar-default {
    overflow: visible !important;
}
20jt8wwn

20jt8wwn2#

尝试更改隐藏元素的z索引(我使用的是1000,但请尽量使用最小值)。

.dropdown-menu{
    z-index: 1000;
}

相关问题