NuxtN
Nuxt•6mo ago•
49 replies
lazygopher

NuxtUI DropdownMenu opens the menu at the top of the page when scrolling

I use NuxtUI UDropdownMenu in my header navigation. When the user scrolls the page, the header is sticky to the top. When user clicks the menu icon, the DropdownMenu opens but jumps all the header with the menu to the top of the page, so the user needs to scroll all the way to see the menu. If I close it with ESC, the menu returns to the correct position on the page

This is how the code looks like
    <nav class="hidden md:flex justify-end flex-1 text-center items-center">
        <UNavigationMenu :items="baseItems" orientation="horizontal" class="inline-block" />
        <div class="p-2">
            <div v-if=".."> ... </div>
            <div v-else>
                <UDropdownMenu
                    :items="menuItems"
                    :ui="{
                        content: 'w-48',
                    }"
                >
                    <UButton color="neutral" variant="outline" :trailing-icon="Icons.menu" aria-label="Open menu" />
                </UDropdownMenu>
            </div>
        </div>
    </nav>


How can I fix it?
Was this page helpful?