Nuxt•4mo ago

Nuxt UI Navbar Width Breaks on Small Screen

The background stop covering the full width of the screen for some reason. I cant figure it out. NavBar.vue:

<template>
  <nav class="w-full bg-neutral-800 dark:bg-neutral-950">
    <UContainer class="relative flex items-center justify-between">
      <NuxtLink to="/" class="text-primary py-5 text-4xl font-bold">
        Website
      </NuxtLink>
      <!-- Desktop Navigation (hidden on mobile) -->
      <UNavigationMenu
        :items="navigationItems"
        variant="pill"
        highlight
        highlight-color="primary"
        :ui="NavbarUI"
        class="hidden lg:flex"
      />
      <div class="flex items-center gap-1">
        <ThemeCustomizer />
        <DarkmodeToggle />
        <UButton to="/login" variant="outline"> Log In </UButton>
        <!-- Hamburger Menu Button (visible on mobile) -->
        <UButton
          variant="ghost"
          size="lg"
          class="text-white lg:hidden"
          @click="isMenuOpen = !isMenuOpen"
        >
          <UIcon
            :name="isMenuOpen ? 'i-lucide-x' : 'i-lucide-menu'"
            class="h-6 w-6"
          />
        </UButton>
      </div>
      <!-- Mobile Navigation Menu -->
      <div
        v-if="isMenuOpen"
        class="absolute top-full right-0 border-t-4 border-neutral-400 bg-neutral-800 lg:hidden dark:bg-neutral-950"
      >
        <UContainer class="py-4">
          <nav class="flex flex-col space-y-2">
            <NuxtLink
              v-for="item in navigationItems"
              :key="item.label"
              :to="item.to"
              class="hover:text-primary rounded-md px-4 py-2 text-white transition-colors"
              @click="isMenuOpen = false"
            >
              {{ item.label }}
            </NuxtLink>
          </nav>
        </UContainer>
      </div>
    </UContainer>
  </nav>
</template>

<template>
  <nav class="w-full bg-neutral-800 dark:bg-neutral-950">
    <UContainer class="relative flex items-center justify-between">
      <NuxtLink to="/" class="text-primary py-5 text-4xl font-bold">
        Website
      </NuxtLink>
      <!-- Desktop Navigation (hidden on mobile) -->
      <UNavigationMenu
        :items="navigationItems"
        variant="pill"
        highlight
        highlight-color="primary"
        :ui="NavbarUI"
        class="hidden lg:flex"
      />
      <div class="flex items-center gap-1">
        <ThemeCustomizer />
        <DarkmodeToggle />
        <UButton to="/login" variant="outline"> Log In </UButton>
        <!-- Hamburger Menu Button (visible on mobile) -->
        <UButton
          variant="ghost"
          size="lg"
          class="text-white lg:hidden"
          @click="isMenuOpen = !isMenuOpen"
        >
          <UIcon
            :name="isMenuOpen ? 'i-lucide-x' : 'i-lucide-menu'"
            class="h-6 w-6"
          />
        </UButton>
      </div>
      <!-- Mobile Navigation Menu -->
      <div
        v-if="isMenuOpen"
        class="absolute top-full right-0 border-t-4 border-neutral-400 bg-neutral-800 lg:hidden dark:bg-neutral-950"
      >
        <UContainer class="py-4">
          <nav class="flex flex-col space-y-2">
            <NuxtLink
              v-for="item in navigationItems"
              :key="item.label"
              :to="item.to"
              class="hover:text-primary rounded-md px-4 py-2 text-white transition-colors"
              @click="isMenuOpen = false"
            >
              {{ item.label }}
            </NuxtLink>
          </nav>
        </UContainer>
      </div>
    </UContainer>
  </nav>
</template>

3 Replies

kapa.ai•4mo ago

Hi @Kruskin. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue with your Nuxt UI Navbar background not covering the full width on small screens is likely due to the use of the <UContainer> component. By design, <UContainer> applies a maximum width and horizontal padding to center content, which means its background will not stretch edge-to-edge on smaller screens. This is expected behavior for container components in most design systems, including Nuxt UI, as they are meant to constrain content, not backgrounds. How to fix: - Apply the background color to the outer <nav class="w-full ..."> element, not to the <UContainer>. This ensures the background always covers the full width. - If you want the background to extend fully behind the mobile menu as well, make sure the mobile menu's container does not use <UContainer>, or override its padding/margins as needed. Example adjustment:

<template>
  <nav class="w-full bg-neutral-800 dark:bg-neutral-950">
    <div class="relative flex items-center justify-between max-w-none px-0">
      <UContainer class="flex items-center justify-between w-full">
        <!-- ... your content ... -->
      </UContainer>
      <!-- Mobile Navigation Menu -->
      <div
        v-if="isMenuOpen"
        class="absolute top-full right-0 left-0 border-t-4 border-neutral-400 bg-neutral-800 lg:hidden dark:bg-neutral-950"
      >
        <nav class="flex flex-col space-y-2 px-4 py-4">
          <NuxtLink
            v-for="item in navigationItems"
            :key="item.label"
            :to="item.to"
            class="hover:text-primary rounded-md px-4 py-2 text-white transition-colors"
            @click="isMenuOpen = false"
          >
            {{ item.label }}
          </NuxtLink>
        </nav>
      </div>
    </div>
  </nav>
</template>

<template>
  <nav class="w-full bg-neutral-800 dark:bg-neutral-950">
    <div class="relative flex items-center justify-between max-w-none px-0">
      <UContainer class="flex items-center justify-between w-full">
        <!-- ... your content ... -->
      </UContainer>
      <!-- Mobile Navigation Menu -->
      <div
        v-if="isMenuOpen"
        class="absolute top-full right-0 left-0 border-t-4 border-neutral-400 bg-neutral-800 lg:hidden dark:bg-neutral-950"
      >
        <nav class="flex flex-col space-y-2 px-4 py-4">
          <NuxtLink
            v-for="item in navigationItems"
            :key="item.label"
            :to="item.to"
            class="hover:text-primary rounded-md px-4 py-2 text-white transition-colors"
            @click="isMenuOpen = false"
          >
            {{ item.label }}
          </NuxtLink>
        </nav>
      </div>
    </div>
  </nav>
</template>

Key points: - The background color should be on the outermost element that spans the full width. - <UContainer> is for content, not for backgrounds that need to be full-bleed. This approach aligns with Nuxt UI's design system, where containers are used to constrain content, and backgrounds should be applied to elements outside the container for full-width effects. You can also customize global container widths and paddings via CSS variables if needed, as described in the Nuxt UI documentation Flexible design system. If you need to further customize the container or background behavior, you can adjust the CSS variables like --ui-container or override the container's styles in your CSS Flexible design system. If you need more specific guidance on customizing the container or background, please provide additional details or refer to the Nuxt UI documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@210593164308774912> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

KruskinOP•4mo ago

Switching the UContainers to div did not resolve the issue and I already have the background colour on the outermost nav container. I'm not sure what else to try. Selecting the outer div (line 3) in dev tools and mousing over 'position' on the computed tab shows this purple space over the problem area. I'm not sure what that means or how it helps to resolve the issue.

<template>
  <nav class="w-full bg-neutral-800 dark:bg-neutral-950">
    <div class="relative flex items-center justify-between"> <!-- this div -->

<template>
  <nav class="w-full bg-neutral-800 dark:bg-neutral-950">
    <div class="relative flex items-center justify-between"> <!-- this div -->

Gaming

Programming

Nuxt UI Navbar Width Breaks on Small Screen

Did you find this page helpful?