htmlcssreactjsnext.jstailwind-css

Navbar and Logo are not aligning on the same row in Next js

I'm building a Navbar component in my Next.js application with Tailwind CSS, but I'm having trouble getting the logo and navigation items to appear correctly in the same row with proper spacing (logo on left, nav items on right).

Current Code

// Navbar.tsx
import React from "react";
import Link from "next/link";
import Image from "next/image";
import { getServerSession } from "next-auth";
import { authOptions } from "@/app/api/auth/[...nextauth]/route";
import LoginButton from "./NavbarButtons/LoginButton";
import UserNavMenu from "./NavbarButtons/UserNavMenu";

const Navbar = async () => {
    const session = await getServerSession(authOptions);
    
    return (
        <div className="w-full px-5 py-3 bg-white shadow-sm font-work-sans">
            <nav className="flex items-center justify-between max-w-7xl mx-auto">
                <Link href="/" className="flex-shrink-0">
                    <Image src="/logo.png" alt="logo" width={144} height={30} />
                </Link>
                
                <div className="flex items-center gap-5">
                    {session?.user && session.user.id ? (
                        <>
                            <Link href="/startup/create">Create</Link>
                            <UserNavMenu user={{
                                id: session.user.id,
                                name: session.user.name,
                                email: session.user.email,
                                image: session.user.image
                            }} />
                        </>
                    ) : (
                        <LoginButton />
                    )}
                </div>
            </nav>
        </div>
    );
};

export default Navbar;

// layout.tsx
import Provider from "./provider";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Provider>{children}</Provider>
      </body>
    </html>
  );
}

Expected Behavior

  1. Logo should be on the left side
  2. Navigation items should be on the right side
  3. Both should be in the same row with proper alignment
  4. Full width of the navbar

What I've Tried

  1. Using flex with justify-between on the navbar
  2. Adding flex-shrink-0 to the logo
  3. Nesting multiple flex containers
  4. Adjusting width properties with w-full
  5. Using different combinations of flex alignment properties

I'd appreciate any help to fix this layout issue!

Environment

  1. Next.js 14
  2. Tailwind CSS
  3. Using App Router structure

Current Output: Current Output

Expected Output:

Expected Output

Solution

  • I tried removing the div after the tag and wrapped them in a div with className - justify-center it worked just right for me also upgrading to tailwind v4 and updating my global.css which I didn't provided solve the issue.

    Navbar.tsx:

    import React from "react";
import Link from "next/link";
import Image from "next/image";
import { getServerSession } from "next-auth";
import { authOptions } from "@/app/api/auth/[...nextauth]/route";
import LoginButton from "./NavbarButtons/LoginButton";
import UserNavMenu from "./NavbarButtons/UserNavMenu";

const Navbar = async () => {
    const session = await getServerSession(authOptions);
    
    return (
        <div className="w-full px-5 py-3 bg-white shadow-sm font-work-sans">
            <nav className="flex items-center max-w-7xl mx-auto">

                <div className="flex items-center space-x-6 justify-between">
                {/* Logo */}
                <Link href="/" className="flex-shrink-0">
                    <Image src="/logo.png" alt="logo" width={144} height={30} />
                </Link>

                {/* Navigation Items */}
                    {session?.user && session.user.id ? (
                        <>
                            <Link href="/startup/create" className="text-gray-700 hover:text-gray-900">Create</Link>
                            <UserNavMenu user={{
                                id: session.user.id,
                                name: session.user.name,
                                email: session.user.email,
                                image: session.user.image
                            }} />
                        </>
                    ) : (
                        <LoginButton />
                    )}
                </div>
            </nav>
        </div>
    );
};

export default Navbar;