How to make two rows navbar? - css

Question

I am making a react + tailwind app, where I am having requirement to implement the two row navbar one by one.
For which code that I have tried,
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<nav className="relative flex flex-wrap items-center justify-between px-2 py-3 bg-pink-500 mb-3">
<div className="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div className="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start">
<a
className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
href="#pablo"
>
Logo 1
</a>
<button
className="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
type="button"
onClick={() => setNavbarOpen(!navbarOpen)}
>
<i className="fas fa-bars"></i>
</button>
</div>
<div
className={
"lg:flex flex-grow items-center" +
(navbarOpen ? " flex" : " hidden")
}
id="example-navbar-danger"
>
<ul className="flex flex-col lg:flex-row list-none lg:ml-auto">
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2">Row 1 - Menu 1</span>
</a>
</li>
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2"> Row 1 - Menu 2</span>
</a>
</li>
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2">Row 1 - Menu 3</span>
</a>
</li>
</ul>
{/* Second row menus */}
<ul className="flex flex-col lg:flex-row list-none lg:ml-auto">
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2">Row 2 - Menu 1</span>
</a>
</li>
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2"> Row 2 - Menu 2</span>
</a>
</li>
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2">Row 2 - Menu 3</span>
</a>
</li>
</ul>
</div>
<a
className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
href="#pablo"
>
Logo 2
</a>
</div>
</nav>
I am a beginner to stackoverflow and so I don't know why the above snippet doesn't apply the respective styles but please go through complete working example here,
https://codesandbox.io/s/tailwind-css-and-react-forked-909d1
In the above example you could see that the first row menu and second row menu both are in same line, but I need to move the second row menu below first row.
Please kindly help me to achieve the result as like,
Desktop View:
| Logo 1 ------ Row-1-Menu-1 ---- Row-1-Menu-2 ---- Row-1-Menu-3 ---- Logo 2 |
| ------ Row-2-Menu-1 ---- Row-2-Menu-2 ---- Row-2-Menu-3 ---- |
Mobile/Tab View
| Logo 1 --------- Logo 2 --- Hamburger Icon -- |
Current UI can be viewd here https://909d1.csb.app/

Answer 1

You need to add flexDirection: column to render your ul in one single column and need to remove marginLeft: auto from ul
Try something like below:-
import React from "react";
export default function Navbar({ fixed }) {
const [navbarOpen, setNavbarOpen] = React.useState(false);
return (
<>
<nav className="relative flex flex-wrap items-center justify-between px-2 py-3 bg-pink-500 mb-3">
<div className="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div className="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start">
<a
className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
href="#pablo"
>
Logo 1
</a>
<button
className="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
type="button"
onClick={() => setNavbarOpen(!navbarOpen)}
>
<i className="fas fa-bars"></i>
</button>
</div>
<div
className={
"lg:flex flex-grow items-center" +
(navbarOpen ? " flex" : " hidden")
}
id="example-navbar-danger"
style={{ flexDirection: "column" }} // added flex direction
>
<ul className="flex flex-col lg:flex-row list-none"> // removed margin left
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2">Row 1 - Menu 1</span>
</a>
</li>
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2"> Row 1 - Menu 2</span>
</a>
</li>
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2">Row 1 - Menu 3</span>
</a>
</li>
</ul>
{/* Second row menus */}
<ul className="flex flex-col lg:flex-row list-none"> // removed margin left
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2">Row 2 - Menu 1</span>
</a>
</li>
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2"> Row 2 - Menu 2</span>
</a>
</li>
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2">Row 2 - Menu 3</span>
</a>
</li>
</ul>
</div>
<a
className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
href="#pablo"
>
Logo 2
</a>
</div>
</nav>
</>
);
}