展开时将菜单置于前面

Question

我有一个带有可折叠菜单的标题div和前面的徽标div。我试图得到它，以便在显示菜单时，它显示在徽标div的前面。视觉辅助工具如下

目前获得：

我的目标是：

我的HTML：

last_seen_date

我的CSS：

<header id="masthead" class="site-header navbar-static-top fixed-top <?php echo wp_bootstrap_starter_bg_class(); ?>" role="banner">
    <div class="container">
        <nav class="navbar navbar-expand-xl p-0">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <?php
            wp_nav_menu(array(
            'theme_location'    => 'primary',
            'container'       => 'div',
            'container_id'    => 'main-nav',
            'container_class' => 'collapse navbar-collapse justify-content-end',
            'menu_id'         => false,
            'menu_class'      => 'navbar-nav',
            'depth'           => 3,
            'fallback_cb'     => 'wp_bootstrap_navwalker::fallback',
            'walker'          => new wp_bootstrap_navwalker()
            ));
            ?>

        </nav>
    </div>
</header><!-- #masthead -->
<?php if(is_front_page() && !get_theme_mod( 'header_banner_visibility' )): ?>
    <div id="page-sub-header" <?php if(has_header_image()) { ?>style="background-image: url('<?php header_image(); ?>');" <?php } ?>>
        <div class="container">
            <h1>
                <?php
                if(get_theme_mod( 'header_banner_title_setting' )){
                    echo get_theme_mod( 'header_banner_title_setting' );
                }else{
                    echo 'Wordpress + Bootstrap';
                }
                ?>
            </h1>
            <p>
                <?php
                if(get_theme_mod( 'header_banner_tagline_setting' )){
                    echo get_theme_mod( 'header_banner_tagline_setting' );
            }else{
                    echo esc_html__('To customize the contents of this header banner and other elements of your site, go to Dashboard > Appearance > Customize','wp-bootstrap-starter');
                }
                ?>
            </p>
            <a href="#content" class="page-scroller"><i class="fa fa-fw fa-angle-down"></i></a>
        </div>
    </div>

我希望这是有道理的。对Wordpress代码表示歉意，但是如果重要的话，不想采取任何措施。如果需要更多信息，请告诉我，我会添加它。 TIA

编辑以包含开发人员工具的代码：