Can't scroll on Mobile Menu using Nuxt-Link
Hey,
I am having a problem where using my mobile menu after navigation I can't scroll anywhere. But if I open and close and don't navigate its fine. Here is a link to see https://omc-global.vercel.app
Code:
3 Replies
<div v-if="mobileNav" class="fixed inset-0 z-50 flex flex-col py-8 mx-auto bg-primary-d h-scren">
<div class="container flex justify-between w-full px-4 mx-auto">
<NuxtLink to="/">
<img class="w-full h-10 m-auto" :src="siteLogo.filename" alt="">
</NuxtLink>
<div>
<button @click="closeMobileNav"
class="p-2 text-black rounded-full bg-gradient-to-r from-primary to-secondary">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div class="my-12 border opacity-60 border-primary-l "></div>
<nav class="container px-4 mx-auto " v-if="headerMenu">
<ul class="space-y-8 text-lg font-medium text-white">
<li class="my-auto" v-for="blok in headerMenu" :key="blok._uid">
<NuxtLink :to="`/${blok.link.cached_url}`" class="hover:text-[#50b0ae] my-auto">
{{ blok.link.story.name }}
</NuxtLink>
</li>
</ul>
<div class="my-8 space-y-5">
<div v-for="action in quote">
<StoryblokComponent class="w-full" :blok="action" />
</div>
<div v-for="action in contact">
<StoryblokComponent class="w-full" :blok="action" />
</div>
</div>
</nav>
</div>
<div v-if="mobileNav" class="fixed inset-0 z-50 flex flex-col py-8 mx-auto bg-primary-d h-scren">
<div class="container flex justify-between w-full px-4 mx-auto">
<NuxtLink to="/">
<img class="w-full h-10 m-auto" :src="siteLogo.filename" alt="">
</NuxtLink>
<div>
<button @click="closeMobileNav"
class="p-2 text-black rounded-full bg-gradient-to-r from-primary to-secondary">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div class="my-12 border opacity-60 border-primary-l "></div>
<nav class="container px-4 mx-auto " v-if="headerMenu">
<ul class="space-y-8 text-lg font-medium text-white">
<li class="my-auto" v-for="blok in headerMenu" :key="blok._uid">
<NuxtLink :to="`/${blok.link.cached_url}`" class="hover:text-[#50b0ae] my-auto">
{{ blok.link.story.name }}
</NuxtLink>
</li>
</ul>
<div class="my-8 space-y-5">
<div v-for="action in quote">
<StoryblokComponent class="w-full" :blok="action" />
</div>
<div v-for="action in contact">
<StoryblokComponent class="w-full" :blok="action" />
</div>
</div>
</nav>
</div>
const mobileNav = ref(false);
const openMobileNav = () => {
console.log('open');
mobileNav.value = true;
document.body.style.overflow = 'hidden';
};
const closeMobileNav = () => {
console.log('close');
mobileNav.value = false;
document.body.style.overflow = 'visible'; // Reset the overflow property to its default value
};
const mobileNav = ref(false);
const openMobileNav = () => {
console.log('open');
mobileNav.value = true;
document.body.style.overflow = 'hidden';
};
const closeMobileNav = () => {
console.log('close');
mobileNav.value = false;
document.body.style.overflow = 'visible'; // Reset the overflow property to its default value
};
have u set a Watch on Route so if changes mobielNav turns False?
try putting watch on mobileNav ref so when its close bring overflow back maybe?
thanks let me try this
thanks @TaymaZ that worked
was there a better way to actualy make a mobile menu like this, feel like this should not be the default behaviour lol
watch(mobileNav, (value) => {
if (value) {
document.body.style.overflow = 'visible';
}
});
watch(mobileNav, (value) => {
if (value) {
document.body.style.overflow = 'visible';
}
});