Added scrollbar for menu && fixed overlapping issue

Author: XengShi

style.css

@@ -948,8 +948,32 @@ body {
     transition: all 0.6s;
     transform: translateX(100%);
     opacity: 0;
+    overflow-y: auto; /* Allow vertical scrolling only */
+    overflow-x: hidden; /* Hide horizontal overflow */
 }
 
+/* -----------Scrollbar for menu---------------- */
+/* For WebKit browsers (Chrome, Safari) */
+.menuCont .optCont::-webkit-scrollbar {
+    width: 2px; /* Width of the scrollbar */
+}
+/* Track */
+.menuCont .optCont::-webkit-scrollbar-track {
+    background: transparent; /* Background of the track */
+}
+/* Handle */
+.menuCont .optCont::-webkit-scrollbar-thumb {
+    background: var(--darkColor-blue); /* Color of the scrollbar handle */
+    border-radius: 2px; /* Rounded corners for the scrollbar handle */
+}
+/* For Firefox */
+.menuCont .optCont {
+    scrollbar-width: thin; /* Makes the scrollbar thin */
+    scrollbar-color: var(--darkColor-blue) transparent; /* Handle color and track color */
+}
+/* -------------End of Scrollbar for menu-------------- */
+
+
 .menuBar .optCont .tilesCont {
     width: 100%;
     height: 50px;
@@ -1225,7 +1249,7 @@ input:checked+.toggle:before {
 
 /* ---------------------- */
 #menuCloseButton {
-    position: absolute;
+     /* position: absolute; */
     bottom: var(--gap);
     width: 42px;
     max-width: 100%; /* Set max-width to fit-content initially */
@@ -1241,6 +1265,7 @@ input:checked+.toggle:before {
     overflow: hidden; /* Hide the overflow when content expands */
     transition: all 0.4s; /* Transition the max-width property */
     cursor: pointer;
+    margin-top: 69px;
 }
 
 #menuCloseButton:hover{
@@ -1265,4 +1290,4 @@ input:checked+.toggle:before {
 #menuCloseButton .icon:hover{
     transition: all 0.2s;
     transform: rotate(90deg);
-}
+}