如何在导航栏品牌部分修复bulma导航栏下拉菜单

Question

我正在使用 bulma.io 框架来构建我的导航栏。我想在导航栏品牌部分放置一个下拉菜单，但是当我这样做时，它会在较小的屏幕上失败（扩展导航栏）。有没有办法在导航栏品牌部分允许下拉菜单？

<nav class="topmenu navbar is-fixed-top is-dark" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
    <!-- LOGO -->
    <div class="navbar-item has-dropdown is-hoverable">
        <a href="/index" class="navbar-link">
            MyCompany
        </a>
        <div class="navbar-dropdown is-boxed">
            <a class="navbar-item" href="/one">One</a>
            <a class="navbar-item" href="/two">Two</a>
            <a class="navbar-item" href="/three">Three</a>
        </div>
    </div>
    <a role="button" class="navbar-burger burger" data-target="topmenu" aria-label="menu" aria-expanded="false">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
    </a>
</div>
<div id="topmenu" class="navbar-menu">
    <div class="navbar-start">
        <a class="navbar-item" href="/start">Start</a>  
    </div>

    <div class="navbar-end">
        <a class="navbar-item" href="/end">End</a>
    </div>
</div>

Answer 1

显然，当屏幕变小时，bulma 会从下拉菜单中移除大部分样式。它仅将样式应用于min-width:1024px，然后假定您希望在屏幕小于 1024 像素时始终打开下拉菜单。

根据docs：

导航栏下拉菜单在 = 1024px。

因此，“允许导航栏中的下拉菜单”您可以做的是将相同的 bulma 样式应用于小于 1024 像素的屏幕。将此添加到您的 css 中，您将看到它解决了您的问题：

@media screen and (max-width:1023px) {
    .navbar-dropdown.is-boxed {
        border-radius: 6px;
        border-top: none;
        box-shadow: 0 8px 8px rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.1);
        display: block;
        opacity: 0;
        pointer-events: none;
        top: calc(100% + (-4px));
        transform: translateY(-5px);
        transition-duration: 86ms;
        transition-property: opacity,transform;
    }
    .navbar-dropdown {
        background-color: #fff;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        border-top: 2px solid #dbdbdb;
        box-shadow: 0 8px 8px rgba(10,10,10,.1);
        display: none;
        font-size: .875rem;
        left: 0;
        min-width: 100%;
        position: absolute;
        top: 100%;
        z-index: 20;
    }
}

Answer 2

多亏了 Klaassiek，我才能让它工作。这是最终的工作 CSS。

@media screen and (max-width:1023px) {
.navbar-brand .navbar-dropdown.is-boxed {
    border-radius: 6px;
    border-top: none;
    box-shadow: 0 8px 8px rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.1);
    display: block;
    opacity: 0;
    pointer-events: none;
    top: calc(100% + (-4px));
    transform: translateY(-5px);
    transition-duration: 86ms;
    transition-property: opacity,transform;
}
.navbar-brand .navbar-dropdown {
    background-color: #fff;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top: 2px solid #dbdbdb;
    box-shadow: 0 8px 8px rgba(10,10,10,.1);
    display: none;
    font-size: .875rem;
    left: 0;
    min-width: 100%;
    position: absolute;
    top: 100%;
    z-index: 20;
}
.navbar.is-spaced .navbar-brand  .navbar-item.is-active .navbar-dropdown, 
.navbar-brand .navbar-item.is-active .navbar-dropdown.is-boxed, 
.navbar.is-spaced .navbar-brand .navbar-item.is-hoverable:focus .navbar-dropdown, 
.navbar-brand .navbar-item.is-hoverable:focus .navbar-dropdown.is-boxed, 
.navbar.is-spaced .navbar-brand .navbar-item.is-hoverable:focus-within .navbar-dropdown, 
.navbar-brand .navbar-item.is-hoverable:focus-within .navbar-dropdown.is-boxed, 
.navbar.is-spaced .navbar-brand .navbar-item.is-hoverable:hover .navbar-dropdown, 
.navbar-brand .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.navbar-brand .navbar-item.is-active .navbar-dropdown, 
.navbar-brand .navbar-item.is-hoverable:focus .navbar-dropdown, 
.navbar-brand .navbar-item.is-hoverable:focus-within .navbar-dropdown, 
.navbar-brand .navbar-item.is-hoverable:hover .navbar-dropdown {
    display: block;
}

}