如何在移动视图中定位汉堡包 <span> (WP Bootstrap Navwalker)

Posted 2023-03-06

【中文标题】如何在移动视图中定位汉堡包 <span> (WP Bootstrap Navwalker)

【英文标题】：How to target the hamburger <span> (WP Bootstrap Navwalker) in mobile view

【发布时间】：2022-01-12 22:00:02

【问题描述】：

我想将图标的颜色更改为白色，但似乎无法正确定位它。有没有办法从 main.css 中定位它，或者只在带有 Bootstrap 的 html 类中定位它（如果有，怎么做？）。

HTML：

<header class="header" id="myHeader">

        <div class="container">

            <nav class="navbar navbar-expand-lg navbar-dark bg-transparent" role="navigation">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="<?php esc_attr_e('Toggle navigation', 'your-theme-slug'); ?>">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <!-- <a class="navbar-brand" href="#">Navbar</a> -->
                    <?php
                    wp_nav_menu(array(
                        'theme_location'    => 'top-menu',
                        'depth'             => 2,
                        'container'         => 'div',
                        'container_class'   => 'collapse navbar-collapse',
                        'container_id'      => 'bs-example-navbar-collapse-1',
                        'menu_class'        => 'top-bar',
                        'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                        'walker'            => new WP_Bootstrap_Navwalker(),
                    ));
                    ?>
                
            </nav>
        </div>

    </header>

CSS

header .container 
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    position: relative;


header .container .top-bar 
    list-style-type: none;
    display: flex;


header .container .site-link,
.site-logo 
    margin-right: auto;


header .top-bar li a 
    /*padding: 0 2rem;*/
    padding: 2.5rem 2rem 2.5rem 2rem;
    color: var(--off_white);
    font-size: 1.3rem;
    text-decoration: none;
    z-index: 1000;


header .top-bar li.current-menu-item a 
    background: var(--secondary);


@media (max-width: 992px) 
    /* bootstrap navwalker menu */
    
    .navbar-toggler span 
        background-color: transparent;
        color: var(--off_white) !important;
        border: 0;
        cursor: pointer;
        font-size: 2rem;
        display: block;
    

另外，如何在移动视图中单击汉堡图标后展开导航菜单，使其全屏显示并且背景模糊？问题基本上是如何定位它，它是否可以定位.top-bar？

【参考方案1】：

发生这种情况的原因是因为您使用的是navbar-dark。这没有错，完全正常，navbar-light 也会发生同样的情况。

这在您的 CSS 中可能值得一试。 !important 我希望能够超越任何 Boostrap CSS（但仅适用于按钮颜色，除非您添加更多 CSS）

button .navbar-toggler
color: white !important;

关于你的第二个问题。如果您可以再次提供代码示例以使其成为格式正确的问题，我认为该问题可能值得发表。 1 个帖子 1 个问题通常效果最好。