Merge pull request #89 from nagalakshmi08/issue84

Fix:Improved navbar UI on mobile phones.
Akshatchaube01 · May 19, 2024 · 4306dd8 · 4306dd8
2 parents 0de1444 + 16ea6fb
commit 4306dd8
Show file tree

Hide file tree

Showing 2 changed files with 1 addition and 20 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -19,7 +19,7 @@ const Navbar = () => {
             >
                 <i className="ri-menu-line text-white text-2xl"></i>
             </button>
-            <ul className={`absolute md:relative top-full left-0 md:left-auto md:top-auto w-full md:flex md:items-center md:justify-center  md:bg-transparent transition-all duration-300 ease-in-out ${isMenuOpen ? 'flex' : 'hidden'} flex-col md:flex-row list-none m-0 p-4 gap-x-10 text-sm md:text-base lg:text-lg xl:text-xl 2xl:text-3xl`}>
+            <ul className={`absolute bg-black opacity-80 gap-5 md:relative top-full left-0 md:left-auto md:top-auto w-full md:flex md:items-center md:justify-center  md:bg-transparent transition-all duration-300 ease-in-out ${isMenuOpen ? 'flex' : 'hidden'} flex-col md:flex-row list-none m-0 p-4 gap-x-10 text-sm md:text-base lg:text-lg xl:text-xl 2xl:text-3xl`}>
                 <li className="hover:underline text-white md:text-black text-center md:text-left">
                     <NavLink to="/" className={isActive('/')}><i className="ri-home-fill"></i> Home</NavLink>
                 </li>