In React with tailwindcss move navbar in to the same line

laalaaala 0
Viewed 21

Hey guys i have a problem, i want to make the navbar in the same line as the img but it shows me everything horizontal, so the coustom links have to move in to the same line also vertical. any ideas?

    <nav className="bg-black flex justify-between w-full h-20 items-center gap-8 pr-8 fixed">
  <Link to="/" className="text-6xl p-5">
    <img src={QTech} alt="QTech"/>
  </Link>

  <div className="hidden md:flex">
    <ul className="justify-between items-center ">
      <li className="cursor-pointer capitalize font-medium h-20 px-4 text-gray-500 duration-200">
        <CustomLink to="/">HOME</CustomLink>
        <CustomLink to="/Uberuns">ÜBER UNS</CustomLink>
        <CustomLink to="/Service">SERVICE</CustomLink>
        <CustomLink to="/Beratung">BERATUNG</CustomLink>
        <CustomLink to="/Referenzen">REFERENZEN</CustomLink>
        <CustomLink to="/Kontakt">KONTAKT</CustomLink>
      </li>
    </ul>
  </div>
navbar tailwind-css reactjs
1 Answers

Since the wrapping div is flex, it only has one child, the <ul> component, which also has one child, the single <li>. If you want to have a navbar like image on the left then nav items on the right you would do something like this

<nav className="flex justify-between w-full">
  <Image /> // whatever wrapping component you want to use

  <ul className="md:flex hidden justify-between items-center">
    <li className="cursor-pointer capitalize"> Link 1 </li>
    <li className="cursor-pointer capitalize"> Link 2 </li>
  </ul>

</nav>

The main takeaway, I think, is that flex affects only its direct children.

maxspiri0
Related