style(mainnav): fix padding for and expand options

GovTechSG · Dec 27, 2024 · 0d7334f · 0d7334f
1 parent 70741ce
commit 0d7334f
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/src/components/Mainnav/mainnav-dropdown.css b/src/components/Mainnav/mainnav-dropdown.css
@@ -1,3 +1,6 @@
+:host([expand="always"]) .nav-link {
+  padding: 0px var(--sgds-padding-md);
+}
 
 @media (min-width: 576px) {
   :host([expand="sm"]) .nav-link {

diff --git a/src/components/Mainnav/mainnav-item.css b/src/components/Mainnav/mainnav-item.css
@@ -1,3 +1,7 @@
+:host([expand="always"]) .nav-link {
+  padding: 0px var(--sgds-padding-md);
+}
+
 @media screen and (min-width: 576px) {
   :host([expand="sm"]) .nav-link {
     padding: 0px var(--sgds-padding-md);

diff --git a/src/components/Mainnav/mainnav.css b/src/components/Mainnav/mainnav.css
@@ -58,7 +58,13 @@ nav > .navbar-body {
 }
 
 nav > .navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)) {
-  padding: var(--sgds-padding-sm) var(--sgds-padding-lg);
+  padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);
+}
+
+@media screen and (max-width: 768px) {
+  nav > .navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)) {
+    padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);
+  }
 }
 
 .navbar-collapse {