CODEWITHSUNDEEP
cssvue.jsvuejs2vue-componentbulma
Norgul
Norgul

Reputation: 4783

Bulma hamburger menu doesn't show items

I am using Bulma as my CSS framework. I had issues making the hamburger menu work. The documentation is unclear about how the whole thing should function. I saw the menu correctly transforming from full menu to 3 lines when shrinking the screen, however I couldn't make it work.

Answer following...

Upvotes: 1

Views: 1978

Answers (1)

Norgul
Norgul

Reputation: 4783

What documentation doesn't state clearly is that both navbar-burger and navbar-menu classes need to toggle is-active property in order to show.

Here is my working solution in Vue, hope it helps someone:

<nav class="navbar is-info">
    <div class="navbar-brand">
        <a role="button" class="navbar-burger burger"
           :class="{ 'is-active': isHamburgerOpen }"
           @click="openHamburgerMenu"
           data-target="navMenu">
            <span></span>
            <span></span>
            <span></span>
        </a>
    </div>
    <div id="navMenu"
         class="navbar-menu"
         :class="{ 'is-active': isHamburgerOpen }">
        <div class="navbar-end">
            <!-- menu content -->
        </div>
    </div>
</nav>

JS:

data() {
    return {
        isHamburgerOpen: false,
    }
},
methods : {
    openHamburgerMenu() {
        this.isHamburgerOpen = !this.isHamburgerOpen;
    }
}

No need to use jQuery. If going with vanilla JS just fetch 2 elements by ID and change their class programatically.

Upvotes: 1

Related Questions