Menu Items stacking vertically

Stack = Django, PostgreSQL, TailwindCSS 4 using Django-Tailwind (DaisyUI plugin) and Vanilla JavaScript

My menu items for desktop (lg screens and above) on the second row are stacking vertically. I don't understand why they aren't horizontal.

    <div class="hidden lg:flex justify-center w-full mt-2">
       <ul class="menu menu-horizontal flex-row px-1">
         <li><a href="#">About</a></li>
         <li><a href="#">Shop</a></li>
         <li><a href="#">Blog</a></li>
      </ul>
    </div>

This is the second part of the header and needs to be underneath the search bar on lg screens and above.

I am using the DaisyUI TailwindCSS 4 navbar and menu components for the header.

In my style.css I have

    @import "tailwindcss";
    @plugin "@tailwindcss/forms";
    @plugin "@tailwindcss/typography";
    @plugin "daisyui";

At the top so I know DaisyUI is installed. I am on DaisyUI 5.0.43 according to my package.json

Вернуться на верх