Adjust gap and responsiveness of header elements

helenclx · Aug 10, 2024 · ee0b6b5 · ee0b6b5
1 parent 3f880db
commit ee0b6b5
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/src/_includes/global/header.njk b/src/_includes/global/header.njk
@@ -38,6 +38,7 @@
         justify-content: space-between;
         align-items: center;
         flex-wrap: wrap;
+        gap: 0.5em 1em;
         padding: 1rem 1.5rem;
         background-color: var(--clr-body-bg);
         box-shadow: var(--bs-main);
@@ -74,7 +75,7 @@
     .header__navmenu {
         list-style-type: "";
         padding: 0;
-        margin: 1em 0 0 0;
+        margin: 0;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
@@ -140,8 +141,7 @@
         .header__title { margin-bottom: 0; }
     }
 
-    /* Tablet screen size */
-    @media only screen and (min-width: 43.75rem) {
+    @media only screen and (min-width: 705px) {
         .header { position: sticky; }
         .header__navmenu { margin: 0; }
         .header__toggle, .header__popover { display: none; }