HERE is a SANDBOX with the issue on it

I have a hoverable dropdown inside a Navbar

When I move to a different page, the dropdown is still open

I have tried this in plain Bulma, the issue still remains

I am on Nuxt.js using SSR

I am using nuxt-link / equivalent of Vue router-link to navigate to a different page.

Here is the my default.vue file

<template> <div class="ch-container"> <header class="ch-header"> <nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation" > <div class="navbar-brand"> <nuxt-link class="navbar-item" to="/"> <img alt="CH Logo" src="https://i.imgur.com/v35Kfc9.png" width="28" height="28" /> </nuxt-link> <a role="button" class="navbar-burger burger" 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"> <nuxt-link class="navbar-item" to="/news"> News </nuxt-link> <nuxt-link class="navbar-item" to="/resources"> Resources </nuxt-link> <nuxt-link class="navbar-item" to="/tickers"> Tickers </nuxt-link> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link"> More </a> <div class="navbar-dropdown"> <a class="navbar-item"> FAQ </a> <nuxt-link class="navbar-item" to="/contact"> Contact </nuxt-link> <hr class="navbar-divider" /> <a class="navbar-item"> Feature Request </a> </div> </div> </div> <div class="navbar-end"> <div class="navbar-item"> <a href="#"> <fa :icon="faMoon" /> </a> </div> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link is-arrowless"> <fa :icon="faExclamationCircle" /> </a> <div class="navbar-dropdown"> <a class="navbar-item"> No new notifications </a> </div> </div> <div class="navbar-item"> <div class="buttons"> <nuxt-link class="button is-primary" to="/signup"> <strong>Sign up</strong> </nuxt-link> <nuxt-link id="login" class="button is-light" to="/login"> Log in </nuxt-link> </div> </div> </div> </div> </nav> </header> <main class="ch-main"> <nuxt /> </main> <footer class="ch-footer is-hidden-mobile"> <div class="level"> <div class="level-left"> <div class="level-item"> <a href="#"> <span class="icon"> <fa :icon="faFacebookSquare" /> </span> </a> <a href="#"> <span class="icon"> <fa :icon="faTwitterSquare" /> </span> </a> <a href="#"> <span class="icon"> <fa :icon="faRedditSquare" /> </span> </a> </div> </div> <div class="level-right"> <div class="level-item"> ©coinhexa, All Rights Reserved </div> <div class="level-item"> <nuxt-link to="/contact">Contact</nuxt-link> </div> <div class="level-item"> <nuxt-link to="/terms-of-service">Terms</nuxt-link> </div> <div class="level-item"> <nuxt-link to="/privacy-policy">Privacy</nuxt-link> </div> </div> </div> </footer> </div> </template> <script> import { faFacebookSquare, faTwitterSquare, faRedditSquare, } from '@fortawesome/free-brands-svg-icons' import { faMoon, faExclamationCircle } from '@fortawesome/free-solid-svg-icons' export default { computed: { faFacebookSquare() { return faFacebookSquare }, faTwitterSquare() { return faTwitterSquare }, faRedditSquare() { return faRedditSquare }, faMoon() { return faMoon }, faExclamationCircle() { return faExclamationCircle }, }, mounted() { // Get all "navbar-burger" elements const $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((el) => { el.addEventListener('click', () => { // Get the target from the "data-target" attribute const target = el.dataset.target const $target = document.getElementById(target) // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" el.classList.toggle('is-active') $target.classList.toggle('is-active') }) }) } }, } </script> <style></style>

Here is a GIF illustrating the problem

How to close the dropdown after you move to a different page?