diff --git a/src/components/main/Header.jsx b/src/components/main/Header.jsx
index 206cc94..bce18bb 100644
--- a/src/components/main/Header.jsx
+++ b/src/components/main/Header.jsx
@@ -104,6 +104,7 @@ const Header = () => {
     let burder = document.querySelector(".header__burger");
     let nav = document.querySelector(".header__nav");
     let navItem = document.querySelectorAll(".nav__item");
+    let body = document.getElementsByTagName("body");
     if (burder.classList.contains("active")) {
       burder.classList.remove("active");
       nav.classList.remove("active");
@@ -372,7 +373,7 @@ const Header = () => {
         ) : (
           ""
         )}
-        <nav className="header__nav position-absolute">
+        <nav className="header__nav">
           <ul className="header__ul d-flex flex-column">
             <li className="nav__item active d-flex align-items-center justify-content-between">
               <a href="#" className="nav__link font-h4">
diff --git a/src/index.css b/src/index.css
index 62e43c9..d4a7513 100644
--- a/src/index.css
+++ b/src/index.css
@@ -206,12 +206,15 @@ a:hover {
   opacity: .7;
 }
 .header__nav {
+  position: fixed !important;
+  left: 0;
+  top: 0;
   transform: translateX(-200%);
   opacity: 0;
   transition: .5s;
   padding: 20px;
-  width: 100%;
-  height: fit-content;
+  width: 0;
+  height: 100%;
   overflow-y: auto !important;
   text-align: left !important;
   background-color: var(--black);
@@ -221,12 +224,12 @@ a:hover {
   opacity: 1;
   right: 0;
   top: 0;
+  width: 100%;
   z-index: 90;
 }
 .header__ul {
   overflow-y: auto;
   margin: 48px 0;
-  height: 100%;
 }
 .header__create {
   padding: 4px;