I need help with making code for vertical nav bar responsive when shrinking screen size down.

Hi! I currently made a vertical nav bar using code I found somewhere else on Squarespace forum. I think it looks great until you mess with the screen size. Then I start getting things cut off which I don't like. Is there anyway to fix it to where it isn't cutting other things in my website off? I can include the code below. I put together multiple codes I found on different forums so I might have an error within my code. If someone more advanced in code could help me, that'd be great! My site is annahilton.com

// Vertical Navigation //
/* Float header */
@media screen and (min-width:992px) {
  .header-title {
    position: fixed;
    top: 2vw;
    left: 2.1vw;
    z-index: 9999;
}
}
.header-nav-list {
  width: 135vh !important;
  padding: 40px;
  background: #F7EDDE;
  position: fixed;
  -webkit-transform:rotate(-90deg)translateX(-85%);
  -webkit-transform-origin: top left;
  left: 0px;
  top: 25px;
  text-align: center;
  z-index: 999;
}

14 hours ago, newsquaredesigner23 said:

I currently made a vertical nav bar. Is there anyway to fix it to where it isn't cutting other things in my website off?

Have you tried adding some left margin to allow the vertical nav bar to sit 'beside' the body content, instead of overlaying it? Try this Custom CSS:

@media screen and (min-width: 800px) {
  body {
    margin-left: 110px;
  }
}

Let me know how you get on. Giving feedback by clicking one of the icons below will let me (and others) know it helped!

Did this help? Please click one of the icons below  ⬇️

On 12/29/2023 at 12:07 PM, paul2009 said:

Have you tried adding some left margin to allow the vertical nav bar to sit 'beside' the body content, instead of overlaying it? Try this Custom CSS:

@media screen and (min-width: 800px) {
  body {
    margin-left: 110px;
  }
}

Let me know how you get on. Giving feedback by clicking one of the icons below will let me (and others) know it helped!

Did this help? Please click one of the icons below  ⬇️

That did help!! However it moved my header icon to the center. Is there anyway to fix that? Thank you so much!!!