20:T551,---------------------- To make the Nuxt UI Header's container span the full page width at all times, you need to override the default container class for the header component. By default, the header's container uses the following class: ```js container: 'flex items-center justify-between gap-3 h-full' ``` and the actual width constraint is typically applied by the UContainer component or a similar utility elsewhere in your layout. To ensure the header container is always full width, you can update your `app.config.ts` to remove any max-width or centering constraints from the header's container slot. For example: ```ts export default defineAppConfig({ ui: { header: { slots: { // Remove max-w and mx-auto if present, and ensure w-full is set container: 'w-full flex items-center justify-between gap-3 h-full' } } } }) ``` This will make the header's container always take the full width of the viewport, regardless of any global container settings. You do not need to change the global `--ui-container` variable, as that affects other components like UContainer, not the header directly. Reference: [Header Theme Configuration]() ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------21:T4f4,@kapa.ai

WG123456

This is the html it has max-w-(--ui-container) but i cannot change this in the slots...22:T6e0,

nuxt ui header

Similar Threads

Similar Threads

Similar Threads