Issue positioning a position: absolute element in Tailwindcss

Question

I'm working on this TailwindCSS project where I have a logo to the left and navigation to the right. Both of them are centered. Because the logo is position:absolute; the navigation is behind the logo. I want them to be side by side. I'm using flex. Is it possible? I'm not sure if grid will be a better solution.

This is the link to tailwind playground.

Answer 1

I think the best option is to put the logo inside the <ul>...</ul> inside an extra list (<li>) item. This way it will allways be next to your homepage link, and won't overlap. You will have to add the width of the image to the <li> element.

An example is seen here:

https://play.tailwindcss.com/NlxxGIsX1v?layout=horizontal

Answer 2

The simplest solution would be to apply padding-right to the logo.

Change this...

<span class="logo flex items-center">...</span>

...to this.

<span class="logo flex items-center pr-10">...</span>

See the snippet.