Can I use CSS to create a custom navigation menu with icons, subheaders, rounded edges, and transparency?

Site URL: https://www.letsbonfire.com/

This is what I want the menu to look like - or as close to it as possible. I've tried a variety of codes for the transparency and rounded edges and nothing seems to affect it.

Add to Design > Custom CSS

.folder-toggle:hover {
    background-color: rgba(0,0,0,0.35);
    color: white !important;
    border-radius: 20px;
}
.subnav {
    background-color: rgba(0,0,0,0.35) !important;
    border-radius: 20px;
    margin-top: 5px;
}
.subnav>div:nth-child(1) a:before {
    content: "\e00e";
    font-family: 'squarespace-ui-font';
}
.subnav>div:nth-child(2) a:before {
    content: "\e028";
    font-family: 'squarespace-ui-font';
}