html - 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

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

What I've Tried

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

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

Environment

Next.js 14
Tailwind CSS
Using App Router structure

Current Output:

Expected Output:

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

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

What I've Tried

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

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

Environment

Next.js 14
Tailwind CSS
Using App Router structure

Current Output:

Expected Output:

Share Improve this question edited Mar 25 at 12:51 asked Mar 25 at 11:43 Radical Rosh 1046 bronze badges

Add a comment |

2 Answers 2

Sorted by: Reset to default 1

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;

Fixed Navbar Component

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 (
    <header className="w-full bg-white shadow-md">
      <div className="max-w-7xl mx-auto px-5 py-4 flex items-center justify-between">
        
       
        <Link href="/" className="flex items-center">
          <Image 
            src="/logo.png" 
            alt="logo" 
            width={144} 
            height={30} 
            className="h-auto w-auto" 
            priority
          />
        </Link>

        
        <nav className="flex items-center gap-6">
          {session?.user && session.user.id ? (
            <>
              <Link href="/startup/create" className="text-gray-700 hover:text-black transition">
                Create
              </Link>
              <UserNavMenu
                user={{
                  id: session.user.id,
                  name: session.user.name,
                  email: session.user.email,
                  image: session.user.image,
                }}
              />
            </>
          ) : (
            <LoginButton />
          )}
        </nav>
      </div>
    </header>
  );
};

export default Navbar;

Explanation of Changes

Container Wrapping:
- Added max-w-7xl mx-auto for centered content.
- Applied padding px-5 py-4.
Logo Section:
- Wrapped the logo in a Link with flex items-center to ensure proper alignment.
- Added className="h-auto w-auto" to maintain the image's natural proportions.
- Used priority for faster loading.
Navigation Section:
- Wrapped the nav items in a <nav> with flex items-center gap-6 for spacing.
- Added text-gray-700 hover:text-black with a transition effect for a smoother hover interaction.

Tips :

max-w-7xl: Keeps content centered and prevents stretching on large screens.
justify-between: Ensures the logo and nav items are on opposite sides.
gap-6: Adds consistent spacing between nav items.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Navbar and Logo are not aligning on the same row in Next js - Stack Overflow

Current Code

Expected Behavior

What I've Tried

Environment

Current Code

Expected Behavior

What I've Tried

Environment

2 Answers 2

Fixed Navbar Component

Explanation of Changes

与本文相关的文章

评论列表(0)