Vertical Navigation Menu Not Fitting to Viewport

Question

Working on a vertical navigation menu which came out great but running into issues with navigation menu filling the whole page (viewport).

The menu as it is ends at the middle of the page. (image) enter image description here

Not sure what the issue is but hoping to get some clues on where I went wrong?

Thanks in advance.

HTML

<div class="header-social">
    <div class="hamburger-vertical">
        <div class="menu-icon">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
        </div>
    </div>
  <nav class="header-nav-secondary">
    <ul>
      <li class="brands">BRANDS</li>
     
   
    </ul>
  </nav>
</div>

CSS

/* NAV BAR CSS*/

.header-social {
  float: right;
  transform: rotate(-90deg) translateY(-100%);
  transform-origin: top right;
  background: #7D522A66;
  height: 75px;
  width: 100%;
    z-index: 2000;
    position: absolute;
}

.hamburger-vertical{
    border: solid 1px;
    float: right;
    width: 117px;
    height: 100%;
    background-color: #CAA571;
}

.menu-icon{
    transform: rotate(90deg);
    position: fixed;
    padding: 1px 5px 0 55px;
}
.menu-icon > .line {
    background-color: #292929;
    height: 1.5px;
    display: block;
    width: 35px;
}
.menu-icon > .line + .line {
    margin-top: 8px;
}



.header-nav-secondary{
    float: right;

}


li.brands{
    transform: rotate(180deg);
    font-family: Montserrat, sans-serif;
    text-transform: capitalize;   
    color: white;
    padding-left: 40px;
    letter-spacing: 2px;
    display: inline-block;
    padding-bottom: 5px;
}

Answer 1

Assuming that 'header-nav-secondary' is intended to be at 100% height of the viewport: Have you tried setting it's height to 100vh? The vh unit is the viewport's height so setting it to 100vh should make it 100% of the viewport's height.

.header-nav-secondary{
  float: right;
  height: 100vh;
}