How to fix bulma navbar dropdown when it is in the navbar-brand section

user_4437053 0
Viewed 1127

I am using the bulma.io framework to build my navbar. I want to put a dropdown in the navbar-brand section but when I do it fails (expands the navbar) on smaller screens. Is there a way to allow a dropdown menu in the navbar-brand section?

<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>

large screen

small screen

bulma responsive css
2 Answers

Apparently bulma removes most of the styling from dropdowns when screens get smaller. It applies styles only to min-width:1024px then presumes you then want the dropdown to always be opened when screen get smaller than 1024px.

According to the docs:

The navbar-dropdown is visible on touch devices < 1024px but hidden on desktop >= 1024px.

So what you could do 'to allow a dropdown in the navbar', is to apply the same bulma styles also for screens smaller than 1024px. Add this to your css and you will see that it fixes your problem:

@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;
    }
}
user_22884760

Thanks to Klaassiek I was able to get this to work. Here is the final working 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;
}

}

enter image description here

enter image description here

user_44370530
Related