CODEWITHSUNDEEP
cssresponsivebulma
Steve Lloyd
Steve Lloyd

Reputation: 949

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

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

Upvotes: 2

Views: 1879

Answers (2)

Steve Lloyd
Steve Lloyd

Reputation: 949

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

Upvotes: 2

Klaassiek
Klaassiek

Reputation: 2906

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

Upvotes: 2

Related Questions