Remove gold square around contact us button on hover event

Decysif · Oct 23, 2024 · e7677bd · e7677bd
1 parent 9cbe99e
commit e7677bd
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss
@@ -125,7 +125,7 @@ nav.navbar {
     }
   }
 
-  // Contact button styling
+  // Contact button specific styles (Overrides nav-item styles)
   #contact-button {
     background-color: #ffcc00;  // Gold button
     color: black;
@@ -141,6 +141,16 @@ nav.navbar {
       color: #000;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }
+
+    // Remove hover border effect from the nav-item class
+    &.li.nav-item {
+      border: none;
+      &:hover {
+        background-color: #fff;  // Keep hover effect clean
+        border: none;  // Prevent square border issue
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); // Keep round shape on hover
+      }
+    }
   }
 
   // Mobile styles

diff --git a/layouts/partials/site-navigation.html b/layouts/partials/site-navigation.html
@@ -47,7 +47,7 @@
         </li>
       {{ end }}
       {{ with .Site.GetPage "/contact.md" }}
-        <li class="nav-item {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pl3" "pr3" }}">
+        <li class="nav-item-btn {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pl3" "pr3" }}">
           <a class="hover-white no-underline white-90" href="{{ .RelPermalink }}" title="{{ i18n "pageTitle" . }}">
             <button id="contact-button" class="btn btn-success black-90">{{ .Params.button_text }}</button>
           </a>