How do I add a transparent background to my navigation?

I've achieved this look for a left-aligned navigation menu, but am wondering if I can add a background overlay to it for legibility. I'm working in Squarespace 7.1 and have used CSS (pasted below) for the left-alignment but can't figure out how to add a transparent background to the back of the menu for legibility. Any ideas how I can do this?
 

/*vertical navigation*/
.header-nav {
width:1%;
position: fixed;
  padding-top: 15%;
z-index: 1000;
  text-align: left !important;

}
.header-layout-nav-right .header-nav-list {
    justify-content: flex-start;
}
.header-layout-nav-right .header-nav {
  padding-left:3px;
}
.header-nav {
    top: 8px;
}
.header-layout-nav-right .header-nav-item:not(:first-child):not(.header-actions-action--cart) {
    margin-left: 0vw;
}

Hi,

What is site url? We can check easier