Nuxt•2mo ago

[Solved] Nuxt Ui Pro Header moves out of viewport

If I scroll a certail amount, the UHeader is still visible due its sticky behaviour --> Ok! if I scroll over 1/3 of the page, the UHeader goes away and I do not understand why. In the Nuxt UI Docs it does not do that.

14 Replies

kapa.ai•2mo ago

Hi @derHodrig. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the provided knowledge sources, the expected behavior of the Nuxt UI Pro <UHeader> component is to remain visible at the top of the viewport due to its use of CSS position: sticky and the top-0 utility. The header's height is controlled by the --ui-header-height CSS variable, and its sticky behavior is defined in the theme configuration:

export default defineAppConfig({
  uiPro: {
    header: {
      slots: {
        root: 'bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50',
        // ...
      }
    }
  }
})

export default defineAppConfig({
  uiPro: {
    header: {
      slots: {
        root: 'bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50',
        // ...
      }
    }
  }
})

This configuration should keep the header visible as you scroll, just like in the Nuxt UI documentation examples. There is no mention in the official docs of the header disappearing after scrolling a certain amount. If your header moves out of the viewport after scrolling, this is not the intended behavior according to the documentation and examples providedHeader - Usage Header - Theme. Possible causes (not explicitly covered in the docs, but based on the provided configuration) could include: - Custom CSS or layout changes in your project that override or conflict with the sticky positioning. - A parent container with overflow: hidden, overflow: auto, or overflow: scroll that breaks sticky positioning. - JavaScript that programmatically hides the header on scroll (not part of Nuxt UI Pro by default). Recommendation:
Double-check your layout and CSS for any conflicting styles or containers that might affect sticky positioning. Compare your implementation closely with the official example:

<template>
  <UHeader />
</template>

<template>
  <UHeader />
</template>

with the theme slot for root as shown above. If you are following the official usage and theme, the header should remain sticky and visible at the top of the viewport throughout scrolling, just as it does in the Nuxt UI documentation. If the issue persists, try to isolate your header in a minimal reproduction to identify any external factors causing the problemHeader - Usage Header - Theme. If you need further help, please provide a code sample or more details about your layout. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

derHodrigOP•2mo ago

@kapa.ai I have

<UApp>

  <UHeader />
  <UMain>
    <UPage>
      <slot />
    </UPage>
  </UMain>
</UApp

<UApp>

  <UHeader />
  <UMain>
    <UPage>
      <slot />
    </UPage>
  </UMain>
</UApp

no custom css

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Given your layout:

<UApp>
  <UHeader />
  <UMain>
    <UPage>
      <slot />
    </UPage>
  </UMain>
</UApp>

<UApp>
  <UHeader />
  <UMain>
    <UPage>
      <slot />
    </UPage>
  </UMain>
</UApp>

and no custom CSS, the <UHeader /> should remain sticky and visible at the top of the viewport as you scroll, matching the behavior shown in the Nuxt UI documentation. The sticky behavior is provided by the default theme configuration, which applies sticky top-0 z-50 to the header root slot Header Theme. There is no mention in the knowledge sources of the header disappearing after scrolling a certain amount. In the official docs, the header remains visible throughout scrolling Header Usage. If your header disappears after scrolling: - This is not the expected behavior according to the documentation. - Since you have no custom CSS, the issue may be caused by something outside the provided code or a potential bug. Suggestions: - Double-check that your Nuxt UI Pro and Nuxt UI packages are up to date. - Ensure there are no parent containers (in layouts or elsewhere) with CSS that could interfere with sticky positioning. - Try to reproduce the issue in a minimal new Nuxt project using only the code above. If the problem persists, the knowledge sources do not provide enough information to diagnose a cause beyond what is described here. If you can share a minimal reproduction or more details, it may help to further isolate the issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

derHodrigOP•2mo ago

@kapa.ai is there a playground like stackblitz for nuxt ui?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, there is a playground for Nuxt UI. The official documentation provides a CodeSandbox playground for Nuxt UI, where you can try out Nuxt UI components interactively in your browser. This allows you to experiment with Nuxt UI without setting up a local project Nuxt UI Installation. You can find links to these playgrounds in the Nuxt UI documentation under the "Installation" sections. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

derHodrigOP•2mo ago

@kapa.ai I could reproduce it. Could yo do anything with it or should I create issue for that? https://codesandbox.io/p/devbox/stoic-marco-s485t2

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for providing a reproduction. According to the official Nuxt documentation, if you encounter a bug or unexpected behavior that you can reliably reproduce (especially with a minimal reproduction like your CodeSandbox), you are encouraged to create an issue. The docs specifically recommend:

It's important to be able to reproduce the bug reliably - in a minimal way and apart from the rest of your project. This narrows down what could be causing the issue and makes it possible for someone not only to find the cause, but also to test a potential solution.

You should search the open issues first to see if your problem has already been reported. If not, please create a new issue and include your minimal reproduction link and a clear description of the problem. This will help the maintainers investigate and resolve the issue more efficiently Reporting Bugs. So yes, you should create an issue for this, including your CodeSandbox link. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

derHodrigOP•2mo ago

@kapa.ai solved by removing Main.css

html, body, #__nuxt {
  height: 100vh;
}

html, body, #__nuxt {
  height: 100vh;
}

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The knowledge sources do not explicitly mention the effect of setting height: 100vh; on html, body, #__nuxt in relation to the sticky behavior of <UHeader> in Nuxt UI Pro. However, based on the official theme configuration, the sticky header is expected to work as long as there are no parent containers with CSS that interferes with sticky positioning, such as fixed heights or overflow settings on parent elements Header Theme. If removing

html, body, #__nuxt {
  height: 100vh;
}

html, body, #__nuxt {
  height: 100vh;
}

solved your issue, it is likely because setting height: 100vh; on these elements can restrict the scrollable area, causing sticky elements to behave unexpectedly. This aligns with the general guidance in the documentation to avoid conflicting CSS that could affect layout or sticky positioning, even though this specific scenario is not detailed in the knowledge sources. If you follow the default usage and theme as shown in the docs, and avoid such global height restrictions, the sticky header should behave as expected Header Usage. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Gaming

Programming

[Solved] Nuxt Ui Pro Header moves out of viewport

Did you find this page helpful?