如何使 Bootstrap 5 导航栏下拉菜单在桌面上悬停时打开，但在移动设备上单击时打开？

Question

我对整个 Web 开发方面还比较陌生，所以我需要一些帮助 😭

我一直在为一家公司制作一个 Wordpress 网站，在使用 Bootstrap 5 制作导航栏时，我注意到我的 CSS 破坏了整个网站的功能。

CSS 实现了我在桌面上想要的功能：悬停时打开下拉菜单，并且下拉菜单中的项目完全可单击。问题是，我希望它们仅在悬停时打开，但它们仍然可单击，并且如果单击将保持打开状态。
另外，我的 CSS 完全破坏了移动功能，因此整个菜单甚至无法在移动设备上打开，按钮切换器无法运行，我在这里不知所措，真的不知道如何解决它或在哪里解决从这里开始。

如果我从 CSS 文件中删除此样式，导航栏的功能就像开箱即用一样，因此无需悬停，但也可以在移动设备上单击它，所以我知道是样式破坏了它。

欢迎任何解决方案，包括使用脚本等。谢谢:)

CSS（样式.css）：

.navbar-wrapper {
    background-color: var(--orange);
}
.nav-container {
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 2.5rem;
    height: 5.625rem;
}
.navbar-toggler {
    border-style: none;
}
.navbar-brand {
    padding-top: .85rem;
}
.collapse.navbar-collapse {
    justify-content: flex-end;
    display: flex;
}
.navbar-nav .nav-link {
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    padding: .625rem 0.75rem;
    border-radius: 50px;
    transition: background-color 0.3s;
}
.nav-item {
    padding-left: .625rem;
}
.nav-item.active .nav-link{
    background-color: rgba(255,255,255,0.8);
    color: var(--orange) !important;
}
.navbar-nav .nav-link:hover {
    background-color: rgba(255,255,255,0.2);
    color: #fff;
}
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-menu {
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.dropdown-menu .dropdown-item {
    text-transform: uppercase;
    font-weight: 600;
    color: var(--light-grey);
    transition: color 0.3s;
}
.dropdown-menu .dropdown-item:hover {
    color: var(--orange);
}

PHP（标题.php）：

<header class="navbar-wrapper">
        <nav class="navbar navbar-expand-lg">
            <div class="container-lg padding-global nav-container">
                <a class="navbar-brand" href="<?php echo esc_url( home_url( '/') ); ?>">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/svg/logo.svg" width="130px" height="auto" alt="Logo Bigdooh">
                </a>
                <button class="navbar-toggler" 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( 'Menu de Navegação', 'your-theme-slug' ); ?>">
                    <i class="fa-solid fa-bars"></i>
                </button>
                <?php
                wp_nav_menu( array( 
                    'theme_location' => 'header-menu',
                    'depth' => 2,
                    'container' => 'div',
                    'container_class' => 'collapse navbar-collapse',
                    'container_id' => 'bs-example-navbar-collapse-1',
                    'menu_class' => 'navbar-nav mr-auto',
                    'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
                    'walker' => new WP_Bootstrap_Navwalker(),
                ) ); 
                ?>
            </div>
        </nav>
    </header>

Answer 1

您只需在 CSS 中添加 CSS 媒体查询，即可让附加 CSS 仅在桌面上运行，而不能在移动设备上运行。

@media only screen and (min-width: 720px) {
    .navbar-wrapper {
        background-color: var(--orange);
    }
    .nav-container {
        width: 100%;
        max-width: 90rem;
        margin: 0 auto;
        padding: 0 2.5rem;
        height: 5.625rem;
    }
    .navbar-toggler {
        border-style: none;
    }
    .navbar-brand {
        padding-top: .85rem;
    }
    .collapse.navbar-collapse {
        justify-content: flex-end;
        display: flex;
    }
    .navbar-nav .nav-link {
        color: #fff;
        text-transform: uppercase;
        font-weight: 600;
        padding: .625rem 0.75rem;
        border-radius: 50px;
        transition: background-color 0.3s;
    }
    .nav-item {
        padding-left: .625rem;
    }
    .nav-item.active .nav-link{
        background-color: rgba(255,255,255,0.8);
        color: var(--orange) !important;
    }
    .navbar-nav .nav-link:hover {
        background-color: rgba(255,255,255,0.2);
        color: #fff;
    }
    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
    }
    .dropdown-menu {
        background-color: #fff;
        border-radius: 2px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .dropdown-menu .dropdown-item {
        text-transform: uppercase;
        font-weight: 600;
        color: var(--light-grey);
        transition: color 0.3s;
    }
    .dropdown-menu .dropdown-item:hover {
        color: var(--orange);
    }
}

您可以复制上面的 CSS 代码，它应该可以解决您遇到的问题。