navbar collision fixed

Signed-off-by: Harshil <[email protected]>

Author: hars-21

layouts/partials/nav.html

@@ -1,7 +1,7 @@
 <!--Navbar starts here-->
 <nav>
   <header>
-    <div class="md:flex md:flex-row md:px-12 xl:px-16 md:justify-between py-5 items-center">
+    <div class="md:flex md:flex-row md:px-16 md:justify-between py-5 items-center">
       <div class="flex justify-between px-4 md:hidden">
         <div>
           {{ $image := resources.Get "logo/large_logo.svg" }}
@@ -14,13 +14,13 @@
           </svg>
         </div>
       </div>
-      <div class="hidden md:block">
+      <div class="md:block hidden">
         {{ $image := resources.Get "logo/large_logo.svg" }}
-        <a href="/"><img src="/logo/large_logo.svg" class="md:h-10 xl:h-14" alt="Cloud Native Postgres Logo"></a>
+        <a href="/"><img src="/logo/large_logo.svg" class="h-14" alt="Cloud Native Postgres Logo"></a>
       </div>
 
-      <div class="hidden md:block">
-        <ul class="md:flex md:gap-4 xl:gap-8 text-2xl medium-gray my-5 pb-0">
+      <div class="hidden md:block px-4">
+        <ul class="md:flex gap-10 text-2xl medium-gray my-5 pb-0">
           <li><a href="/blog">Blog</a></li>
           <li><a href="/tags/tutorial">Tutorials</a></li>
           <li><a href="/releases">Releases</a></li>
@@ -56,7 +56,7 @@
       </div>
       <!--For hamburger click -->
 
-      <div class="hidden md:block">
+      <div class="my-4 hidden md:flex">
         <a class="github-button" href="https://github.com/cloudnative-pg/cloudnative-pg"
           data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large" data-show-count="true"
           aria-label="Star cloudnative-pg/cloudnative-pg on GitHub">Star</a>
@@ -71,4 +71,4 @@
   toggleButton.addEventListener('click', () => {
     naviList.classList.toggle('hidden');
   })
-</script>
+</script>