How to make drop down menu folder transparent

Site URL: https://www.noiristhenewnoir.com/contact

Hello,

I'm trying to find out how to make the drop down menu on my navigation transparent or translucent rather than a black box. Can anyone other any assistance?

On 4/15/2021 at 1:51 PM, lion_the_el said:

Site URL: https://www.noiristhenewnoir.com/contact

Hello,

I'm trying to find out how to make the drop down menu on my navigation transparent or translucent rather than a black box. Can anyone other any assistance?

try this custom css

body:not(.header--menu-open) .header-nav-folder-content {
    background-color: transparent;
}

2 hours ago, bangank36 said:

try this custom css

body:not(.header--menu-open) .header-nav-folder-content {
    background-color: transparent;
}

That's not working for me, but thank you for the response.

@lion_the_el Add to Design > Custom CSS

/* transparent dropdown */
.header-nav-folder-content {
    background-color: transparent !important;
}

Thank you for your help, that works great.

This worked! Any code i can add to make the dropdown text centered?

31 minutes ago, Javier33 said:

This worked! Any code i can add to make the dropdown text centered?

Can you share your site with protected password so we can take a look?

On 12/7/2021 at 4:45 AM, Javier33 said:

This worked! Any code i can add to make the dropdown text centered?

Add to Design > Custom CSS

/* dropdown text center */
.header-nav-folder-item a {
    text-align: center;
}

Thanks so much.

I now do have a transparent drop down folder menu. But depending on the page you are on, the text is not always best visible. Is there a way I can blur the background of the folder menu, just like you can do with the header?

Ilona

On 2/21/2022 at 4:51 PM, ilonas said:

Thanks so much.

I now do have a transparent drop down folder menu. But depending on the page you are on, the text is not always best visible. Is there a way I can blur the background of the folder menu, just like you can do with the header?

Ilona

What is your site url? We can check your case easier

I have the same issue. These codes not worked for me. Using bedford 7.0

www.raulsantos.net

23 minutes ago, RaulSantos said:

I have the same issue. These codes not worked for me. Using bedford 7.0

www.raulsantos.net

You want to set the background from:

to something like this, don't you?

On 3/2/2022 at 9:00 PM, RaulSantos said:

I have the same issue. These codes not worked for me. Using bedford 7.0

www.raulsantos.net

Add to Design > Custom CSS

/* dropdown transparent */
.subnav {
    background-color: transparent !important;
}

wait what? how do you change the opacity of the menu on squarespace without css. please tell me there is a way. how ridiculous something like this would need a custom code??

4 hours ago, FurlaStudio said:

wait what? how do you change the opacity of the menu on squarespace without css. please tell me there is a way. how ridiculous something like this would need a custom code??

Indeed, these above solutions in this post is just the Css (or SCSS) code. We set them in Home > Design > Custom Css

Hi There, 

I'm having the same issue, on Brine Template, wanting to make the drop down box on header navigation transparent. 

www.dirtydiscocreative.com 

Thank you 

You can try adding to Home > Design > Custom Css

.tweak-header-primary-nav-hover-style-active .Header-nav .Header-nav-folder {
  background-color: transparent;
}

Support me by pressing 👍  or marking as solution if this useful for you

My testing

8 hours ago, Beyondspace said:

You can try adding to Home > Design > Custom Css

.tweak-header-primary-nav-hover-style-active .Header-nav .Header-nav-folder {
  background-color: transparent;
}

Support me by pressing 👍  or marking as solution if this useful for you

Thank you so much!!! Worked perfectly!! 

you can also change that in: Site Styles - Colors - choose your theme - Sitewide - Section Background - change the transparency 🙂

On 4/19/2021 at 1:12 AM, tuanphan said:

@lion_the_el Add to Design > Custom CSS

On 4/19/2021 at 1:12 AM, tuanphan said:

@lion_the_el Add to Design > Custom CSS

/* transparent dropdown */
.header-nav-folder-content {
    background-color: transparent !important;
}

 

is there a specific version of this custom CSS for Avenue template ??   thanks!

3 hours ago, ChuckG-Art said:

 

Can you share your site so I can check?

2 hours ago, Beyondspace said:

Can you share your site so I can check?

https://www.chuckgumpert.com/

22 minutes ago, ChuckG-Art said:

https://www.chuckgumpert.com/

I think we should set it a little transparent with the following code

#topNav nav .folder-collection .subnav {
  background: rgba(45, 42, 42, 0.8);
}

My testing

13 hours ago, Beyondspace said:

I think we should set it a little transparent with the following code

#topNav nav .folder-collection .subnav {
  background: rgba(45, 42, 42, 0.8);
}

My testing

fantastic!  thank you!