making the navbar sticky

github · Jan 17, 2024 · 7938c96 · 7938c96
1 parent 2f91efc
commit 7938c96
Show file tree

Hide file tree

Showing 4 changed files with 260 additions and 44 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -9,8 +9,8 @@
 {% assign lang_dir = page.lang | prepend: "/" %}
 {% endif %}
 
-<body class="f4">
-  <div class="py-4 border-bottom px-3">
+<body class="f4" >
+  <div class="py-4 border-bottom px-3" id="header">
     <div class="container-lg p-responsive">
       <div class="d-md-flex mx-auto flex-justify-between flex-items-center">
         <h1 class="alt-h4 text-center mb-4 mb-md-0">

diff --git a/assets/css/custom.scss b/assets/css/custom.scss
@@ -121,3 +121,14 @@ img.pquote-avatar {
 .form-select {
   -webkit-appearance: none;
 }
+
+//Sicky Navbar contibution by nidhi
+//inside this container id >> navbar is made sticky
+#header {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  background-color: rgba(255, 255, 255, 0.95); //slight background color is added to avoid text overlap during scrolling
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.1); //slight box shadow
+  backdrop-filter: blur(5px); //slight glassmorphism 
+}
diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json