Collapsible navbar-items for navbar-dropdown elements on mobile screen

[mtanmay]

This is about Bulma | Navbar.

Overview of the problem

When the number of navbar-elements inside a navbar-dropdown increases, a mobile user has to scroll a lot to get to the bottom of the navbar. It would be really nice if there was a way (something like, is-collapsible-mobile) to collapse these navbar-items on mobile screen to save some extra scrolling.

This is about the Bulma CSS framework

Expected Behavior

Menu 1, Menu 2, Menu 3 to be collapsible on mobile screens:

https://codepen.io/tanmaydas/pen/ppPgXY (Load this in mobile view)

Actual Behavior

Menu 1, Menu 2, Menu 3 are automatically expanded on mobile screens.

Temporary JS workaround:

https://codepen.io/tanmaydas/pen/dKbBQK

[mtanmay]

Thread updated with an example.

[caffeinatedMike]

@jgthms Any input or example on how to accomplish this? I've run into this issue with my current setup and would like to allow a navbar-dropdown element (which is only made visible on mobile) to be shown as collapsed and give the user the ability to expand it if they need. I think the psuedo-solution provided by @tanmay-das is a viable one. Adding a mobile modifier for navbar-dropdown elements would be the cleanest way to accomplish this in my opinion.

[caffeinatedMike]

@tanmay-das While we wait for @jgthms input I've worked out a hack-y workaround if you haven't already figured out another way. Here's the JsFiddle with a single dropdown menu that appears on mobile only. I've added some jquery to toggle the dropdown collapse.

[BenjiFrugoni]

I just run into the same issue. Kinda frustrating since it even becomes worse if the navbar is fixed. Then you cannot even navigate if you try with fixed-bottom since the bottom:0; css rules makes it impossible to navigate up& down through the menu if it is big enough.

[KaotiKcr]

help yourself and use the responsive modifiers
is-hidden-touch for example works great for me, I apply it at the navbar-dropdown
https://bulma.io/documentation/modifiers/responsive-helpers/#hide

[mtanmay]

@KaotiKcr I was hoping for a CSS-end solution, rather than a JS-end solution. Sure I can toggle a class like I have done in this pen: https://codepen.io/tanmaydas/pen/dKbBQK

...but I think at least this should be supported out of the box since navbar is a major part of the framework. Writing JS for even something as simple as this increases JS overhead in my opinion...

[rebosante]

No javascript workaround, just place this in your mobile media query (It's SASS but you can turn it to css easily)
`
.navbar-item {

    &.has-dropdown {
      .navbar-dropdown {
        display: none;
      }
      &.is-active {
        .navbar-dropdown {
          display: block;
        }
       }
     }
  }

`

[712Jefferson]

Would really, really appreciate if this feature is added as well. I have too many items in my navigation and it completely overwhelms a mobile screen. We need a lot more mobile nav customization and nav customization, in general, as this otherwise great framework matures. I have yet to get one of the above options to work for my purpose, unfortunately.

[webwakko]

Just came accross this same issue while creating my navigation.
Indeed the navbar should have a collapsed state for all menu / submenu items in "burger"-mode.
Does not seem logic to have it uncollapsed.

[ghost]

I've tried the proposed solutions, all of them are only able to hide the dropdown items (content). But you can't reach them anymore (e.g. by hover/click in burger mode).

[rebosante]

I've tried the proposed solutions, all of them are only able to hide the dropdown items (content). But you can't reach them anymore (e.g. by hover/click in burger mode).

You better share your implementation...

[ferasawadi]

Hey ,
Still Can hide the drop down on mobile but cant reach any thing inside it
any suggestions . Thank you

[Mhmdabed11]

Hey ,
Still Can hide the drop down on mobile but cant reach any thing inside it
any suggestions . Thank you

you can try and set in css pointer-events:none

[AppDude27]

Below is a 3 line fix in jquery that is compatible with any bulma implementation. hope this helps!

1. Use a jquery selector to select all Parent "has-dropdown" nav items and give them a click event.
2. Target the children and hide them via jquery toggle(). You have to do .children().children() twice in order for it to hide.
3. Make sure jquery is in your project.
   $(".navbar-item.has-dropdown").click(function () { $(this).children().children().toggle(); });

[lance-hardy]

Spot on, that did it

$(".navbar-item.has-dropdown").click(function () { $(this).children().children().toggle(); });

[supfam]

Hello.
You can add this to your css file:

@media only screen and (max-width: 1024px) {
  .navbar-item {
    &.has-dropdown {
      .navbar-dropdown {
        display: none;
      }
      &:hover {
        .navbar-dropdown {
          display: block !important;
        }
      }
    }
}

everything is hidden on your desired media width and expandable on click!

[StefanS-O]

Had the same issue and solved it the following way (without jQuery):

I added the following to my SASS file for the Navigation DropDown

.navbar-item
  +touch
    .has-dropdown
    .navbar-dropdown
      display: none
    &.is-active
      .navbar-dropdown
        display: block

And then added the following JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const $navDropdowns = Array.prototype.slice.call(document.querySelectorAll('.navbar-item.has-dropdown'), 0);

  if($navDropdowns.length > 0) {

    // Add a click event on each of them
    $navDropdowns.forEach( el => {
      el.addEventListener('click', () => {

        // Get the target from the "data-target" attribute
        const target = el.dataset.target;
        const $target = document.getElementById(target);

        el.classList.toggle('is-active');

      });
    });

  }
});

Seems to work but didn't do so much testing :)

[EricAndrechek]

Combined some answers here and made some modifications, as in testing I noticed that using some of the answers above meant that on non-mobile screens, clicking the dropdown in the non-burger menu navbar would leave it visible until you clicked it again, which I didn't think was desirable. Here is my JS:

const $navDropdowns = Array.prototype.slice.call(document.querySelectorAll(".navbar-item.has-dropdown"), 0);

if ($navDropdowns.length > 0) {
    // Add a click event on each of them
    $navDropdowns.forEach((el) => {
        el.addEventListener("click", () => {
            if (document.documentElement.clientWidth < 960) {
                // Get the target from the "data-target" attribute
                const target = el.dataset.target;
                const $target = document.getElementById(target);

                el.classList.toggle("is-active");
            }
        });
    });
}   

And my SCSS:

// make dropdowns in mobile dropdown bar not always show
@media only screen and (max-width: 960px) {
    .navbar-item {
        &.has-dropdown {
            .navbar-dropdown {
                display: none;
            }
            &.is-active {
                .navbar-dropdown {
                    display: block;
                }
            }
        }
    }
}

Hope this helps the next person to stumble across this!