bulma navbar menu open by default on mobile - html

Question

I have a bulma navbar I'm manipulating with react. Below is the generated code. On desktop the menu displays correctly and opens and closes the dropdown menus as expected.
On mobile however all the dropdowns are open by default and although the class "is-active" is being added and removed when I click on the "navbar-link" the menu isn't opening and closing as expected.
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbar">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbar" class="navbar-menu is-active">
<div class="navbar-start">
<div class="navbar-item has-dropdown">
<a class="navbar-link">Data Types</a>
<div class="navbar-dropdown">
<div class="types">
Select Content
</div>
</div>
</div>
</div>
</div>
</nav>
The "is-active" in the code above is from the burger menu opening the menu. What am I doing wrong?

Answer 1

I needed to add the sass
.navbar-item {
&.has-dropdown {
.navbar-dropdown {
display: none;
}
&.is-active {
.navbar-dropdown {
display: block;
}
}
}
}
under #mobile in my sass. Then the mobile behaves like the desktop.

Answer 2

THIS WORKED for me like a charm--->
/** The jQuery will trigger only at mobile viewport */
if (window.matchMedia("(max-width: 767px)").matches) {
const $navDropdowns = document.querySelectorAll(".navbar-item.has-dropdown");
if ($navDropdowns.length > 0) {
// HIDE THE DROP-DOWN ON THE INITIAL LOAD
$navDropdowns.forEach((el) => {
const target = el.dataset.target;
const $target = document.getElementById(target);
$target.style.display = "none";
//Register the click event on the dropdown list
el.addEventListener("click", () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
if ($target.style.display === "block") {
$target.style.display = "none";
} else {
$target.style.display = "block";
}
});
});
}
}
Collapsed Menu
Expanded Menu
Here's the HTML for the navbar:
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" />
</a>
<a role="button" class="navbar-burger" #click="toggle" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
<div data-target="more" class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown" id="more">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider" />
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
<div data-target="new" class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
New
</a>
<div class="navbar-dropdown" id="new">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider" />
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
Notice the data-target="more", data-target="new" and the ids passed in the child elements. By the way, this is an implementation on a Vuejs app, but this will work everywhere.

Answer 3

The css code only hide the dropdown links but you can't reach them anymore on mobile.

Answer 4

I also grappled with this issue so decided to give Buefy a try. This isn't exactly a pure Bulma answer but it could be considered close by default and it worked first-time.
I'm using Nuxt, initially with Bulma as a nuxtjs module and the installation/conversion from Bulma to Buefy was simple: https://buefy.org/documentation/start/#nuxtjs.
For a completely fresh integration I removed the Bulma module from nuxt-config, deleted node_modules/package-lock.json, and followed the above guide.
I tweaked the Buefy Navbar component to my requirements and it just works - shows/hides the dropdown properly - and it also adds the correct Aria attrs automatically:
<template>
<b-navbar>
<template slot="brand">
<h1>
<nuxt-link to="/" class="navbar-item is-size-4" id="homelink">
Brand link here
</nuxt-link>
</h1>
</template>
<template slot="end">
<b-navbar-item tag="div">
<div class="buttons">
<nuxt-link class="navbar-item" to="/projects">Projects</nuxt-link>
<nuxt-link class="navbar-item" to="/about">About/Contact</nuxt-link>
</div>
</b-navbar-item>
</template>
</b-navbar>
</template>

Answer 5

By default the $navbar-breakpoint is set to break at $desktop.
You can override your initial bulma variables in your own mystyles.scss like bulma describes here https://versions.bulma.io/0.7.0/documentation/overview/customize/.
It might look something like this if you never want it to break: $navbar-breakpoint: 0px

Answer 6

Based on #psykx 's answer, I came up with the following:
#charset "utf-8";
#import "./bulma/bulma";
#include mobile{
.navbar-item {
&.has-dropdown {
.navbar-dropdown {
display: none;
}
&.is-active {
.navbar-dropdown {
display: block;
}
}
}
}
}
Works very well.