CODEWITHSUNDEEP
htmlcssbulma
psykx
psykx

Reputation: 293

bulma navbar menu open by default on mobile

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?

Upvotes: 2

Views: 5377

Answers (7)

Eduardo Russo
Eduardo Russo

Reputation: 4219

You can do everything with CSS only, no JS required, no media query or @include is used, too.

Just add this to your global (S)CSS.

.navbar-item {
  &.has-dropdown {
    .navbar-dropdown {
      display: none;
    }
    &.is-hoverable:hover {
      .navbar-dropdown {
        display: block;
      }
    }
  }
}

Upvotes: 0

TeaDrinkingProgrammer
TeaDrinkingProgrammer

Reputation: 155

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.

Upvotes: 0

Thomas Lyver
Thomas Lyver

Reputation: 36

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

Upvotes: 0

Shivang Chaturvedi
Shivang Chaturvedi

Reputation: 119

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.

Upvotes: 1

redplanet
redplanet

Reputation: 158

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>

Upvotes: 0

psykx
psykx

Reputation: 293

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.

Upvotes: 2

Nina
Nina

Reputation: 11

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

Upvotes: 0

Related Questions