Dropdown Menu Color Customization

Site URL: https://www.greenhealthpartnership.org/

Hi,

I'm building my site in 7.1 and I had a question about customizing dropdown menu colors. Each of the pages within my site has a different header color palette, and each of the dropdown menu color backgrounds seems to change depending on what page you're in (I think based on the color theme I have selected). 

How do I customize these dropdown menus so that they mirror the header color palette of each page? I've seen someone recommend this:

/* Change dropdown menu background */
.header-nav-folder-content {
   background: #(whatever color) !important;
}

But this option seems to change the menus for each page of the site. 

I really appreciate any guidance you're willing to provide!

It this is a page by page change, then don't put the code is custom css, which effects the whole site, put this code into the page advanced code injection header of each page with the color you want.

<style>
/* Change dropdown menu background */
.header-nav-folder-content {
   background: #(whatever color) !important;
} 
<style>

pick #color here:

https://www.color-hex.com/

If you use Business Plan, use @derrick code

If you use Personal Plan, edit page > Add Code Block > Add @derric code

What color would be if I want just transparent background, I have tried it in my site, in home, but doens't work

https://rudarevista.squarespace.com

pass: ruda2022

thanks

19 hours ago, mazmac said:

What color would be if I want just transparent background, I have tried it in my site, in home, but doens't work

https://rudarevista.squarespace.com

pass: ruda2022

thanks

Use this CSS code

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

Thanks, @tuanphan, it works.

🙌