fix: Mobile Nav Bar

This commit is contained in:
Dex404 2024-04-22 05:45:29 +00:00
parent f6b9e7afe7
commit 6833f213d1
2 changed files with 14 additions and 14 deletions

View file

@ -11,7 +11,7 @@ import OurBlog from "components/ourblog/OurBlog"
export default function Web() {
return (
<div>
<section id="Home" className="bg-[#0f172a] md:pl-0 md:pr-0 lg:pl-[2%] lg:pr-[2%]">
<section id="home" className="bg-[#0f172a] md:pl-0 md:pr-0 lg:pl-[2%] lg:pr-[2%]">
<Hero01 />
</section>
<section id="aboutUs" className="bg-[#0f172a] md:pl-0 md:pr-0 ">

View file

@ -60,7 +60,7 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
} fixed start-0 top-0 z-20 w-full bg-transparent dark:border-gray-600 dark:bg-gray-900`}
>
<section
className={`${isNavOpen ? "animate-openmenu" : "animate-closemenu"} block backdrop-blur-lg`}
className={`${isNavOpen ? "animate-openmenu" : "animate-closemenu"} block h-screen backdrop-blur-lg`}
style={mobileNavStyle}
>
<div>
@ -81,19 +81,19 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
</svg>
</button>
</div>
<ul className="MENU-LINK-MOBILE-OPEN flex h-full min-h-[300px] flex-col items-center justify-center text-white">
<ul className="MENU-LINK-MOBILE-OPEN flex h-screen min-h-[300px] flex-col items-center justify-center text-white">
<li className="my-2 border-b border-gray-400 uppercase">
<a href="#home">Home</a>
</li>
<li className="my-2 border-b border-gray-400 uppercase">
<a href="#aboutUs">About</a>
</li>
<li className="my-2 border-b border-gray-400 uppercase">
<a href="#services">Services</a>
</li>
<li className="my-2 border-b border-gray-400 uppercase">
<a href="#portfolio">Portfolio</a>
</li>
<li className="my-2 border-b border-gray-400 uppercase">
<a href="#aboutUs">About</a>
</li>
<li className="my-2 border-b border-gray-400 uppercase">
<a href="#">Sign In</a>
</li>
@ -168,6 +168,14 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
Home
</a>
</li>
<li>
<a
href="#aboutUs"
className="block rounded px-3 py-2 text-white hover:bg-gray-100 hover:text-vizoleG2 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:p-0 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:bg-transparent md:dark:hover:text-blue-500"
>
About
</a>
</li>
<li>
<a
href="#services"
@ -184,14 +192,6 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
Portfolio
</a>
</li>
<li>
<a
href="#aboutUs"
className="block rounded px-3 py-2 text-white hover:bg-gray-100 hover:text-vizoleG2 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:p-0 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:bg-transparent md:dark:hover:text-blue-500"
>
About
</a>
</li>
</div>
</ul>
</div>