Mobile navbar is always open

[VocalFan]

This is about Bulma

Bug

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version [0.7.4]
My browser is: Chrome -Android

Description

When using the navbar on mobile it is always open and also clutters the screen (IT CANNOT BE HIDDEN USING THE 3 LINE SQUARE

Steps to Reproduce

WEBSITE: https://revelation-studios.github.io/Revelation-Website/
CODE: https://github.com/revelation-studios/Revelation-Website/blob/master/index.html

Expected behavior

Navbar to be shrunken to fit phone screen and closeable using 3 line square.

Actual behavior

Screen is cluttered by oversized navbar and isn't closeable

[turbopixel]

https://github.com/revelation-studios/Revelation-Website/blob/master/index.html#L33
Just remove the class is-active

[VocalFan]

Then I'm back to the issue of the menu not being able to open when tapping the 3 line square.

[scottwernervt]

@ghostslayer989 You need to use JavaScript to toggle the mobile navbar menu.

The Bulma package does not come with any JavaScript.
Here is however an implementation example, which toggles the class is-active on both the navbar-burger and the targeted navbar-menu, in Vanilla Javascript.

[VocalFan]

That works. Now at line 70 https://github.com/revelation-studios/Revelation-Website/blob/master/index.html#L70 where my dropdown is. The dropdown is now always open

[scottwernervt]

Once again you need to use JS. Take some time to read the documentation.

The navbar-dropdown is visible on touch devices < 1024px but hidden on desktop >= 1024px . How the dropdown is displayed on desktop depends on the parent's class.

While the CSS :hover implementation works perfectly, the is-active class is available for users who want to control the display of the dropdown with JavaScript.

[VocalFan]

Umm... I use is-hoverable ??? Sadly idk where the supposed fix is?

[scottwernervt]

When using is-hoverable, the navbar-dropdown is visible on touch devices < 1024px but hidden on desktop >= 1024px. Your site is working correctly according to the documentation. You need to use JS if you want the user to be able to expand and collapse the dropdown when in mobile.

Mobile automatically expands it:

Mouse over dropdown expands it:

[VocalFan]

So do I need to do some weird stuff or just have it where it needs to be clicked even on desktop?
(I'm very new to Bulma so please work with me here. Sorry if I'm getting you frustrated.)

[VocalFan]

'ello?

[turbopixel]

Hey,
just insert this javascript code of example:

// bulma navigation/dropdowns
document.addEventListener('DOMContentLoaded', function () {

  // Get all "navbar-burger" elements
  var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

  // Check if there are any navbar burgers
  if ($navbarBurgers.length > 0) {

    // Add a click event on each of them
    $navbarBurgers.forEach(function ($el) {
      $el.addEventListener('click', function () {

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

        // Toggle the class on both the "navbar-burger" and the "navbar-menu"
        $el.classList.toggle('is-active');
        $target.classList.toggle('is-active');

      });
    });
  }

});

I use this with bulma on my freifunk* page: https://www.leeraner-freifunk.de/
*free wifi initiative in germany

[VocalFan]

I did that earlier. But now my dropdown is always open and when opening the menu just in general, it brings the is-info color down to where the dropdown is on mobile.

[scottwernervt]

@ghostslayer989 Remove is-hoverable from navbar-item has-dropdown and navbar-dropdown is-boxed has-dropdown. You need to modify the JavaScript code above to ALSO handle navbar-dropdown.

document.addEventListener('DOMContentLoaded', function () {
  var $navbarDropdowns = Array.prototype.slice.call(document.querySelectorAll('.navbar-item.has-dropdown'), 0);

  // Check if there are any navbar dropdowns
  if ($navbarDropdowns.length > 0) {

    // Add a click event on each of them
    $navbarDropdowns.forEach(function ($el) {
      $el.addEventListener('click', function () {
        // Toggle the class on "navbar dropdown"
        $el.classList.toggle('is-active');
      });
    });
  }
});

I recommend searching for JavaScript tutorials to learn DOM manipulation.

[VocalFan]

Now it doesn't wanna open when clicked. On desktop OR mobile.

[scottwernervt]

Once again, please take some time to learn JavaScript. If you load developer tools in your browser, you will see the following console error: SyntaxError: expected expression, got ')'[Learn More] on line Revelation-Website:51:1.

[VocalFan]

I was on mobile.

[hanscees]

what if the bulma documentation had a working example instead of asking people to learn a language? That is so rude. Isn't a library suppose to make life easier or better?

I have the same issue here: bulma hamburger doesnt work properly

There should be an easy solution on the doc pages imho

[hanscees]

in github issue 2500 there is a solution.
you can see it here

and the codepen is here

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[connormcwood]

Yeah this issue still remains, it is suggested to use is-active to force the menu to be open when you click the burger menu. However if you were to also have menu items that have children menu items then this will be replicated down and all menu's and their children will be open. I can see why this reported, and the lastest comment suggesting there was a fix doesn't even work.

[drriguz]

Aha, it's already 2021 but I got the same issue and I'm here😢... I agree that it would be nice that the document could give some guide for that, there should be some kind of standard way to handle this, instead of lot's of wordaround.

what if the bulma documentation had a working example instead of asking people to learn a language? That is so rude. Isn't a library suppose to make life easier or better?

I have the same issue here: bulma hamburger doesnt work properly

There should be an easy solution on the doc pages imho

For someone else who is still struggling for that kind of issue, here is my solution:

@media screen and (max-width: 1024px) {
    .navbar-dropdown .is-active {
      display: block;
    }
    .navbar-dropdown:not(.is-active) {
      display: none;
    }
}

$(document).ready(function () {
    $(".navbar-burger").click(function () {
        $(".navbar-burger").toggleClass("is-active");
        $(".navbar-menu").toggleClass("is-active");
    });
   // just control the "is-action" class for the drop down menu, and use the above css to control this display
    $(".navbar-item.has-dropdown")
        .click(function () {
            $(this).children(".navbar-dropdown").toggleClass("is-active");
        });
});

[Bhallu-pk]

Thanks @drriguz. Your solution worked right away.
For those, Who want to use Javascript instead of jquery you can use this.

      document.addEventListener("DOMContentLoaded", () => {
        const hamburgerButton = document.querySelector(".navbar-burger");
        const navMenu = document.querySelector(".navbar-menu");

        hamburgerButton.addEventListener("click", () => {
          hamburgerButton.classList.toggle("is-active");
          navMenu.classList.toggle("is-active");
        });

        const allDropdowns = document.querySelectorAll(
          ".navbar-item.has-dropdown"
        );

        allDropdowns.forEach((dropdown) => {
          dropdown.addEventListener("click", () => {
            const elem = dropdown.querySelector(".navbar-dropdown");
            elem.classList.toggle("is-active");
          });
        });
      });

@jgthms should this fix this bug as soon as possible. Or if there is a better way than he should mention it in the docs.

[arsiavdiu]

Aha, it's already 2021 but I got the same issue and I'm here😢... I agree that it would be nice that the document could give some guide for that, there should be some kind of standard way to handle this, instead of lot's of wordaround.

what if the bulma documentation had a working example instead of asking people to learn a language? That is so rude. Isn't a library suppose to make life easier or better?
I have the same issue here: bulma hamburger doesnt work properly
There should be an easy solution on the doc pages imho

For someone else who is still struggling for that kind of issue, here is my solution:

@media screen and (max-width: 1024px) {
    .navbar-dropdown .is-active {
      display: block;
    }
    .navbar-dropdown:not(.is-active) {
      display: none;
    }
}

$(document).ready(function () {
    $(".navbar-burger").click(function () {
        $(".navbar-burger").toggleClass("is-active");
        $(".navbar-menu").toggleClass("is-active");
    });
   // just control the "is-action" class for the drop down menu, and use the above css to control this display
    $(".navbar-item.has-dropdown")
        .click(function () {
            $(this).children(".navbar-dropdown").toggleClass("is-active");
        });
});

Thanks @drriguz. Your solution worked right away. For those, Who want to use Javascript instead of jquery you can use this.

      document.addEventListener("DOMContentLoaded", () => {
        const hamburgerButton = document.querySelector(".navbar-burger");
        const navMenu = document.querySelector(".navbar-menu");

        hamburgerButton.addEventListener("click", () => {
          hamburgerButton.classList.toggle("is-active");
          navMenu.classList.toggle("is-active");
        });

        const allDropdowns = document.querySelectorAll(
          ".navbar-item.has-dropdown"
        );

        allDropdowns.forEach((dropdown) => {
          dropdown.addEventListener("click", () => {
            const elem = dropdown.querySelector(".navbar-dropdown");
            elem.classList.toggle("is-active");
          });
        });
      });

@jgthms should this fix this bug as soon as possible. Or if there is a better way than he should mention it in the docs.

###

Thanks, guys it helped!

[juamperuiz]

Aha, it's already 2021 but I got the same issue and I'm here😢... I agree that it would be nice that the document could give some guide for that, there should be some kind of standard way to handle this, instead of lot's of wordaround.

what if the bulma documentation had a working example instead of asking people to learn a language? That is so rude. Isn't a library suppose to make life easier or better?
I have the same issue here: bulma hamburger doesnt work properly
There should be an easy solution on the doc pages imho

For someone else who is still struggling for that kind of issue, here is my solution:

@media screen and (max-width: 1024px) {
    .navbar-dropdown .is-active {
      display: block;
    }
    .navbar-dropdown:not(.is-active) {
      display: none;
    }
}

$(document).ready(function () {
    $(".navbar-burger").click(function () {
        $(".navbar-burger").toggleClass("is-active");
        $(".navbar-menu").toggleClass("is-active");
    });
   // just control the "is-action" class for the drop down menu, and use the above css to control this display
    $(".navbar-item.has-dropdown")
        .click(function () {
            $(this).children(".navbar-dropdown").toggleClass("is-active");
        });
});

Still working this solution. In Bulma 0.9.4.
Thanks so much!