Navbar shrinking with fixed position

Question

I'm using tailwind-css in my svelte app. Why does the following navbar shrink when I set the position to fixed?

 <nav class="container left-0 top-0 w-full bg-white"> <div class="flex"> <!-- navbar elements --> </div> </nav>

With

 <nav class="container fixed left-0 top-0 w-full bg-white">

Answer 1

The issue is likely the use of the container class, not the fixed class.

In TailwindCSS, container is used for constraining an elements width to the width of the current breakpoint.

https://tailwindcss.com/docs/container

So let's say your screen is currently 1200px wide. The container will always be 1024px wide—even if you set w-full . Because the max width in the large breakpoint is 1024px.

When you update the size to max-w-full , you're essentially removing this constraint on the size, letting the nav span the full width of the screen. Adding the max-w-full class cancels out the container class. So you can actually get the same result if you remove both the container and max-w-full classes.

Answer 2

I managed to solve it by modifying class w-full to max-w-full, although I'm not sure exactly why it made so much of a difference