Merge pull request #1682 from Sarthak0085/Sarthak

Updating the Navbar of News and Blogs page for better User Experience
akshitagupta15june · Jun 1, 2024 · 0eb230c · 0eb230c
2 parents 43b0917 + e1094e6
commit 0eb230c
Show file tree

Hide file tree

Showing 2 changed files with 124 additions and 165 deletions.
diff --git a/blog.html b/blog.html
@@ -38,7 +38,7 @@
 
   <body>
     <header
-      class="header text-gray-400 bg-header-offwhite body-font flex flex-row items-center justify-center lg:justify-around"
+      class="header text-gray-400 bg-header-offwhite body-font flex flex-row items-center justify-center xl:justify-around"
       id="header"
     >
       <div
@@ -58,7 +58,7 @@
       <button
         data-collapse-toggle="navbar-default"
         type="button"
-        class="absolute top-4 right-4 sm:inline-flex sm:items-center p-2 lg:hidden focus:outline-none text_4"
+        class="absolute top-7 right-4 sm:inline-flex sm:items-center p-2 xl:hidden focus:outline-none text_4"
         aria-controls="navbar-default"
         aria-expanded="false"
         id="nav-button"
@@ -79,9 +79,9 @@
         </svg>
       </button>
       <nav class="">
-        <div class="hidden w-full lg:block z-2" id="navbar">
+        <div class="hidden w-full xl:block z-2" id="navbar">
           <ul
-            class="w-[100vw] h-1/2 top-0 right-0 p-8 lg:p-4 mt-12 lg:mt-0 text-center text-base lg:text-[18px] space-y-4 lg:space-y-0 lg:space-x-5 lg:static lg:w-auto flex flex-col rounded-lg items-start lg:items-center lg:bg-transparent lg:border-0 lg:flex-row justify-between"
+            class="w-[100vw] h-1/2 top-0 right-0 p-8 xl:px-3 mt-12 xl:mt-0 text-center text-base xl:text-[18px] space-y-4 xl:space-y-0 xl:space-x-5 lg:static xl:w-auto flex flex-col rounded-lg items-center xl:items-center xl:bg-transparent xl:border-0 xl:flex-row justify-between"
           >
             <li>
               <a
@@ -93,7 +93,7 @@
             <li>
               <a
                 href="./index.html#meet"
-                class="lg:p-3 text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item"
+                class="xl:p-3 text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item"
                 >Meet Pets</a
               >
             </li>
@@ -201,7 +201,7 @@
               </a>
             </li>
             <!-- google translate -->
-            <div id="google_translate_element">
+            <div id="google_translate_element" >
               <script
                 type="text/javascript"
                 src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"