fix header menu on tablet

Charlie85270 · Jan 28, 2021 · ac723d4 · ac723d4
1 parent f14cbaa
commit ac723d4
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 14 deletions.
diff --git a/components/layout/HomeLayout.tsx b/components/layout/HomeLayout.tsx
@@ -12,7 +12,7 @@ const HomeLayout: FC = ({ children }) => {
 
             <div className="relative bg-white overflow-hidden h-screen">
                 <div className="max-w-7xl mx-auto h-full">
-                    <div className="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20  lg:w-full lg:pb-28 xl:pb-32 h-full">
+                    <div className="relative pb-8 bg-white sm:pb-16 md:pb-20  lg:w-full lg:pb-28 xl:pb-32 h-full">
                         <AppHeader hideLinks={true} />
                         <main className="mt-10 mx-auto px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28 h-full">
                             {children}

diff --git a/components/site/DropDown/DropD.tsx b/components/site/DropDown/DropD.tsx
@@ -62,10 +62,7 @@ const DropD = (props: Props) => {
                 </svg>
             </button>
             {isSectionOpen && (
-                <div
-                    ref={listElement}
-                    className="absolute z-10 -ml-4 mt-3 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2"
-                >
+                <div ref={listElement} className="absolute z-10 -ml-4 mt-3 transform px-2 w-screen max-w-md sm:px-0">
                     <div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
                         <div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 divide-y divide-gray-300">
                             {props.links.map((entry) => {

diff --git a/components/site/header/AppHeader.tsx b/components/site/header/AppHeader.tsx
@@ -11,7 +11,7 @@ const AppHeader = (props: Props) => {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
 
     return (
-        <div className="relative bg-white dark:bg-gray-800 z-40">
+        <div className="relative bg-transparent dark:bg-gray-800 z-50">
             <div className="max-w-7xl mx-auto px-4 sm:px-6">
                 <div className={`flex justify-between items-center  border-gray-100 py-6  md:space-x-10`}>
                     <div className="flex justify-start items-center gap-12">

diff --git a/components/site/home/HomeComps.tsx b/components/site/home/HomeComps.tsx
@@ -88,23 +88,23 @@ const HomeComps: FC = () => {
                     <div className="col-1 mt-28">
                         <div className="mb-4">
                             <Image
-                                src="/images/sections/homePage.webp"
+                                src="/images/sections/homePage.png"
                                 alt="template picture"
                                 width={600}
                                 height={350}
                             />
                         </div>
                         <div className="mb-4">
                             <Image
-                                src="/images/sections/homePage4.webp"
+                                src="/images/sections/homePage4.png"
                                 alt="template landing page"
                                 width={600}
                                 height={350}
                             />
                         </div>
                         <div className="mb-4">
                             <Image
-                                src="/images/sections/homePage3.webp"
+                                src="/images/sections/homePage3.png"
                                 alt="template landing page"
                                 width={600}
                                 height={350}
@@ -114,31 +114,31 @@ const HomeComps: FC = () => {
                     <div className="col-1">
                         <div className="mb-4">
                             <Image
-                                src="/images/sections/homePage.webp"
+                                src="/images/sections/homePage.png"
                                 alt="template landing page"
                                 width={600}
                                 height={350}
                             />
                         </div>
                         <div className="mb-4">
                             <Image
-                                src="/images/sections/homePage2.webp"
+                                src="/images/sections/homePage2.png"
                                 alt="template landing page"
                                 width={600}
                                 height={350}
                             />
                         </div>
                         <div className="mb-4">
                             <Image
-                                src="/images/sections/homePage5.webp"
+                                src="/images/sections/homePage5.png"
                                 alt="template landing page"
                                 width={600}
                                 height={350}
                             />
                         </div>
                         <div className="mb-4">
                             <Image
-                                src="/images/sections/folio.webp"
+                                src="/images/sections/folio.png"
                                 alt="template landing page"
                                 width={600}
                                 height={350}

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -62,7 +62,7 @@ export const IndexPage: FC = () => {
                         </Link>
                     </h3>
                 </div>
-                {!isMobile && <HomeComps />}
+                <div className="z-20">{!isMobile && <HomeComps />}</div>
             </div>
         </HomeLayout>
     );