Add a title to my logo

Hello,

How can I add a title to my logo without moving the navbar menus ?

I tried adding this in the logo div and the navbar menu is shifted to the right.

<div className="text-4xl pb-3 md:text-7xl px-6 text-center  bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to bg-neutral-400 bg-opacity-50">
     Mon Titre
</div>

navbar.tsx

return (
    <div>
      <div className="p-6 md:p-10 flex items-center justify-between z-50">
        <div>
          <Link className="cursor-pointer" href="/">
            <Image
              priority
              src="/logo/logo.svg"
              alt="Logo"
              width={100}
              height={100}
              className="w-10 h-10 md:w-14 md:h-14"
            />
          </Link>
        </div>
        
        <div
          className="cursor-pointer hidden 
            md:flex space-x-10 items-center
             text-slate-300 text-center 
             bg-clip-text text-transparent 
             bg-gradient-to-b from-neutral-50
              to bg-neutral-400 bg-opacity-50"
        >
          <div onClick={scrollToWebsiteDesign} className="hover:text-gray-50">
            Website Design
          </div>
          <div onClick={scrollToGraphicDesign} className="hover:text-gray-50">
            Graphic Design
          </div>

Sorry there’s not enough information for us to discern the problem. We’d need to see full css and html for all the elements mentioned (not the pre rendered js html).

Or better still a link to the page concerned would be perfect :slight_smile:

1 Like

I understand it’s a project in nextjs and I don’t know how to do it

a RANDOM guess but change

        <div>
          <Link className="cursor-pointer" href="/">
            <Image
              priority
              src="/logo/logo.svg"
              alt="Logo"
              width={100}
              height={100}
              className="w-10 h-10 md:w-14 md:h-14"
            />
          </Link>
        </div>

to something like

        <div class="flex">
          <Link className="cursor-pointer" href="/">
            <Image
              priority
              src="/logo/logo.svg"
              alt="Logo"
              width={100}
              height={100}
              className="w-10 h-10 md:w-14 md:h-14"
            />
          </Link>
          <div class="flex">Mon Titre</div>
        </div>
3 Likes

Sorry. I don’t do next.js at all, but it looks like class= should be className=

(Though this is probably something you should have caught since you’re working with it… :wink:)

1 Like

I noticed thank you very much for your help.

Do you have any idea from the log file what I need to do to deploy it?

See…

1 Like