0

Currently using justify-between to format spacing of my 3 navbar items: logo, links, and authentication btns. However, because the logo is so large, with the way justify-between works my links are not centered. How might I fix this?

enter image description here

Code (built using React and TailwindCSS):

<header
            className={
                "fixed flex flex-col lg:flex-row justify-between bg-white w-full p-4 lg:px-16 lg:items-center z-50"
            }
        >
            <Logo />

            <ul
                className={`${
                    collapsed ? "hidden" : "block"
                } list-none flex flex-col text-lg space-y-2 my-4 lg:space-y-0 lg:flex-row lg:space-x-8`}
            >
                <NavLink href={"/"} toggleNavbar={toggleNavbar}>
                    <IoIosCreate size={24} className={"mr-2"} />
                    <span className={""}>Create</span>
                </NavLink>
                <NavLink ... />
                <NavLink ... />
                {user && (
                    <NavLink ... />
                )}
            </ul>

            <AuthenticationButtons/>

            <ToggleNavbarButton/>
        </header>
Wizard
  • 462
  • 1
  • 6
  • 14

0 Answers0