Question 357401 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to make nav bar horizontal using tailwind, react

I’m learning tailwind using react and i can’t seem to make the navbar horizontal. It even disappears on the Ui at some point. how would you edit the following code to be horizontal?

const Navbar = () => {
  return (
    <nav className="z-50 bg-white">
      <div className="h-10vh flex justify-between lg:py-5 px-20  py -20 border-b">
        <div className="flex items-center flex-1">
          <h2 className="text-3xl font-bold text-pink-500 "> BOWANA </h2>
        </div>
        <div>
          <ul className="flex gap-8 mr-16 text-[18px]">
            <Link to="/"><li>Home</li></Link>
            <Link to="/"><li>Blogs</li></Link>
            <Link to="/"><li>Services</li></Link>
            <Link to="/"><li>Book An Appointment</li></Link>
            <Link to="/"><li>Contact Us</li></Link>
          </ul>
        </div>
      </div>
    </nav>
  );
};
export default Navbar;

I expected a horizontal nav bar, it is vertical

Tags:

3

Answers


  1. 0

    To make your navbar horizontal, need to change the flex direction of the parent container. Currently, the flex direction is set to the default value of flex-col (column), that’s why items are stacked vertically. To make it horizontal, set it to flex-row.

    Login or Signup to reply.
  2. 0 
    const Navbar = () => {
  return (
    <nav className="z-50 bg-white">
      <div className="h-10vh flex justify-between gap-10 lg:py-5 px-20  py-20 border-b">
        <div className="flex items-center flex-1">
          <h2 className="text-3xl font-bold text-pink-500"> BOWANA </h2>
        </div>
        <div>
          <ul className="flex gap-8 text-black mr-16 text-[18px]">
            <li>Home</li>
            <li>Blogs</li>
            <li>Services</li>
            <li>Book An Appointment</li>
            <li>Contact Us</li>
          </ul>
        </div>
      </div>
    </nav>
  );
};
export default Navbar;

    Live preview: https://stackblitz.com/edit/vitejs-vite-agz5wk?file=src%2FNavbar.tsx
    enter image description here
    I resolved the code issue and also defined the black color for li and for anchor/routing you need to read about React Routes and in react routes library you will see Link
    Read more: https://reactrouter.com/en/main/components/link

    Login or Signup to reply.
  3. 0

    You will need to swap your <Link> and <li> nesting. You can also eliminate the <div> surrounding your <ul>.

    import { Link } from "react-router-dom";

const Navbar = () => {
  return (
    <nav className="z-50 w-full bg-white">
      <div className="h-10vh flex gap-8 border-b px-4 py-4 lg:py-5">
        <div className="flex flex-1 items-center">
          <h2 className="text-3xl font-bold text-pink-500">BOWANA</h2>
        </div>
        <ul className="flex items-center justify-between gap-8 text-[18px]">
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/">Blogs</Link>
          </li>
          <li>
            <Link to="/">Services</Link>
          </li>
          <li>
            <Link to="/">Book An Appointment</Link>
          </li>
          <li>
            <Link to="/">Contact Us</Link>
          </li>
        </ul>
      </div>
    </nav>
  );
};

export default Navbar;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search