Made topbar sticky

sunwoo-j · May 23, 2024 · 9d1e4d0 · 9d1e4d0
1 parent c2b2d92
commit 9d1e4d0
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
@@ -898,8 +898,12 @@ $btn-mb: 0.5rem;
 /* --- top-bar --- */
 
 #topbar-wrapper {
-  height: $topbar-height;
-  background-color: var(--topbar-bg);
+  position: -webkit-sticky; /* For Safari */
+  position: sticky;
+  top: 0;
+  z-index: 1000; /* Ensures it stays above other elements */
+  height: $topbar-height; /* Existing height */
+  background-color: var(--topbar-bg); /* Existing background color */
 }
 
 #topbar {

diff --git a/_sass/colors/typography-dark.scss b/_sass/colors/typography-dark.scss
@@ -47,7 +47,7 @@
   --avatar-border-color: rgb(206, 206, 206, 0.9);
 
   /* Topbar */
-  --topbar-bg: rgb(27, 27, 30, 0.64);
+  --topbar-bg: rgb(27, 27, 30);
   --topbar-text-color: var(--text-color);
   --search-border-color: rgb(55, 55, 55);
   --search-icon-color: rgb(100, 102, 105);

diff --git a/_sass/colors/typography-light.scss b/_sass/colors/typography-light.scss
@@ -50,7 +50,7 @@
   --avatar-border-color: white;
 
   /* Topbar */
-  --topbar-bg: rgb(255, 255, 255, 0.7);
+  --topbar-bg: rgb(255, 255, 255);
   --topbar-text-color: rgb(78, 78, 78);
   --search-border-color: rgb(240, 240, 240);
   --search-icon-color: #c2c6cc;