Dropdown menu in a dropdown menu, on responsive version #971
-
|
Hello guys, I'm having some trouble with a dropdown-in-dropdown, in the responsive version of my navbar. I'm pretty new with Tailwind and totally new to DaisyUI, so sorry if my question is dumb. Is there a way to make the children of "Services" appear, let's say under Services when we open the dropdown menu, instead of its right ? Here's my code : const Navbar = () => {
return (
<div className="navbar bg-base-100">
<div className="navbar-start">
<a className="btn btn-ghost normal-case text-xl">Brand&Com</a>
</div>
<div className="navbar-center hidden lg:flex">
<ul className="menu menu-horizontal p-0">
<li>
<a>Accueil</a>
</li>
<li tabIndex="0">
<a>
Services
<svg
className="fill-current"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
>
<path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
</svg>
</a>
<ul className="p-2">
<li>
<a>Community Management</a>
</li>
<li>
<a>Amélioration de la notoriété</a>
</li>
<li>
<a>Marketing digital</a>
</li>
</ul>
</li>
<li>
<a>Portfolio</a>
</li>
<li>
<a>Contact</a>
</li>
</ul>
</div>
<div className="navbar-end">
<div className="dropdown">
<label tabIndex="0" className="btn btn-ghost lg:hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h8m-8 6h16"
/>
</svg>
</label>
<ul
tabIndex="0"
className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52 right-8"
>
<li>
<a>Accueil</a>
</li>
<li tabIndex="0">
<a className="justify-between">
Services
<svg
className="fill-current"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
</svg>
</a>
<ul className="p-2">
<li>
<a>Community Management</a>
</li>
<li>
<a>Amélioration de la notoriété</a>
</li>
<li>
<a>Marketing digital</a>
</li>
</ul>
</li>
<li>
<a>Portfolio</a>
</li>
<li>
<a>Contact</a>
</li>
</ul>
</div>
</div>
</div>
);
};
export default Navbar;Thanks in advance for your help! |
Beta Was this translation helpful? Give feedback.
Answered by
rhscjohn-dev
Jul 28, 2022
Replies: 1 comment 1 reply
-
|
Check out this Taiwlwind Play example. Look at line 14 for the magic. You should also change the svg on line 12 |
Beta Was this translation helpful? Give feedback.
1 reply
Answer selected by
honocoder
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment

Check out this Taiwlwind Play example.
Look at line 14 for the magic. You should also change the svg on line 12