Jump to content

How do I add a transparent background to my navigation?

Recommended Posts

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 {
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 {
.header-nav {
    top: 8px;
.header-layout-nav-right .header-nav-item:not(:first-child):not(.header-actions-action--cart) {
    margin-left: 0vw;


Screen Shot 2022-11-09 at 6.14.26 PM.png

Edited by ohchiayeah
Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.