how can i have a fixed navbar in a horizontal website?

So I have a horizontal website and I want my header to have a fixed position at top center and I tried position fixed it didn't work I read on an article that when you have transformed parents the child can't have position fixed. So what's the solution to this because it seems like there's no way around it

body {
  margin: 0;
}

.inner-wrapper {
  width: 1000vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  transform: rotate(90deg) translatey(-100vh);
  transform-origin: top left;
}

.outer-wrapper {
  background: linear-gradient(170deg, rgba(216, 157, 255, 1) 0%, rgba(255, 115, 115, 1) 50%, rgba(255, 253, 106, 1) 100%);
  ;
  width: 100vh;
  height: 100vw;
  transform: rotate(-90deg) translatex(-100vh);
  transform-origin: top left;
  overflow-y: scroll;
  overflow-x: hidden;
  position: absolute;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

::-webkit-scrollbar {
  display: none;
}

#svgtop {
  position: absolute;
  z-index: -1;
}

#svgbottom {
  position: absolute;
  bottom: 0px;
  z-index: -1;
}

ul {
  list-style: none;
}

#navbar {
  position: fixed;
  top: 0;
}

#navbarlist {
  display: flex;
  justify-content: space-between;
  gap: 50px;
}

<div class="outer-wrapper">

  <div class="inner-wrapper">
    <svg id="svgtop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" width="100%" height="50vh" preserveAspectRatio="none">
                    <path fill="#fff" fill-opacity="1" d="M0,288L40,266.7C80,245,160,203,240,208C320,213,400,267,480,288C560,309,640,299,720,272C800,245,880,203,960,192C1040,181,1120,203,1200,197.3C1280,192,1360,160,1400,144L1440,128L1440,0L1400,0C1360,0,1280,0,1200,0C1120,0,1040,0,960,0C880,0,800,0,720,0C640,0,560,0,480,0C400,0,320,0,240,0C160,0,80,0,40,0L0,0Z">
                    </path>
                </svg>
    <svg id="svgbottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" width="100%" height="100vh" preserveAspectRatio="none">
                    <path fill="#fff" fill-opacity="1" d="M0,288L40,266.7C80,245,160,203,240,208C320,213,400,267,480,288C560,309,640,299,720,272C800,245,880,203,960,192C1040,181,1120,203,1200,197.3C1280,192,1360,160,1400,144L1440,128L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z">
                    </path> 
                </svg>
    <nav id="navbar">
      <ul id="navbarlist">
        <li>home</li>
        <li>about</li>
        <li>products</li>
        <li>contact us</li>
      </ul>
    </nav>

  </div>
</div>

position fixed didnt work

Solution

Don't nest your fixed element in an absolute element. Put the navbar first into a header, then the main content follows in a main-tag. This is called semantic HTML and will help you very much in the long run. :D

<body>
<header>
<!-- put navbar with fixed width here -->
</header>
<main>
<!-- put content and background here -->
</main>
<footer>
<!-- optional footer -->
</footer>
</body>

Also make sure that your fixed element has a width and is positioned with (for example) top and left.