fix tab menu alignment issue (#422)

ansible-community · Feb 20, 2024 · ecf8c2c · ecf8c2c
1 parent 0d3ffbb
commit ecf8c2c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 22 deletions.
diff --git a/themes/ansible-community/sass/_homepage-clickable.scss b/themes/ansible-community/sass/_homepage-clickable.scss
@@ -24,27 +24,6 @@
   white-space: inherit;
 }
 
-/* tabs in the secondary menu */
-.tab-menu-anchor {
-  display: flex;
-  padding: 1.75rem;
-  align-items: center;
-  justify-content: center;
-  font-size: $font-lg;
-  img {
-    float: left;
-    width: auto;
-    height: 2.5rem;
-  }
-  p {
-    white-space: nowrap;
-  }
-  &:hover {
-    background-color: $white;
-    color: $navy;
-  }
-}
-
 /* controls text elements next to
    anchors, such as fa icons */
 .homepage-link {

diff --git a/themes/ansible-community/sass/_homepage-tab-menu-band.scss b/themes/ansible-community/sass/_homepage-tab-menu-band.scss
@@ -5,7 +5,6 @@
   background-color: $grey94;
   display: grid;
   grid-template-columns: repeat(5 1fr);
-  gap: 20px;
   @media screen and (max-width: 992px) {
     display: none;
   }
@@ -20,3 +19,22 @@
     color: $cyan;
   }
 }
+
+.tab-menu-anchor {
+  display: flex;
+  padding: 1.75rem 1.75rem 1rem 1.75rem;
+  justify-content: center;
+  font-size: $font-lg;
+  line-height: 40px;
+  img {
+    float: left;
+    margin-right: 0.25rem;
+  }
+  p {
+    white-space: nowrap;
+  }
+  &:hover {
+    background-color: $white;
+    color: $navy;
+  }
+}