turn the background of the main menu on the homepage from white to transparent w

Can you please post a link to your site? It is almost impossible to give you specific instructions without being able to examine the site directly. Thanks.

https://snipboard.io/
This is the screenshot of my homepage. My website is not ready, so it is invisible to others. Thank you!

So, first of all, the link you posted is to the snipboard.io website, not to your actual screen shot. However, even with a screen shot, we can’t tell you what exactly you need to do because we have to be able to inspect the elements themselves. Because different themes may use different classes or ID for their menus, there’s no way to give you a rule that will work for sure.

If you know how to use either Firefox Dev Tools or Chrome Developer Tools, then you could examine your site yourself and find out what class or ID is associated with your menu. Then you could add a rule like:

.home #site-navigation {
   background: rgba(255, 255, 255, 0);
}

If you are using a theme from the WordPress theme repository, then I can install the theme on a sandbox site and use that. But if you’re using a commercial theme, then it would be difficult unless you knew of a demo page that we could look at.

in all likelihood, your best course of action would be to create a duplicate page template for your homepage to use (rename it something like “hompage.php”) and then add the css directly into the code of this new template.

As the person above stated, without your actual site, we can’t give you the exact code, but this will get you exactly what you desire.

feel free to contact us if you need to know more

Hi, crouchingbruin, thanks for your answer. I use a demo of AVADA, the demo URL is https://avada.theme-fusion.com/classic-shop/

OK, so if you are using the Classic Shop template, you can try adding this rule to your custom CSS (Appearance → Customize → Additional CSS):

body.home .fusion-header,
body.home.fusion-body .fusion-is-sticky.fusion-header-wrapper .fusion-header,
body.home .fusion-secondary-header,
body.home .fusion-secondary-menu-icon,
body.home .fusion-main-menu .sub-menu,
body.home .fusion-main-menu .sub-menu .current-menu-item > a, 
body.home .fusion-main-menu .sub-menu .current_page_item > a {
   background-color: rgba(255,255,255,0.5);
}

The body.home part of each selector will insure that the rule only affects the home page. The important part is the rgba color function. There are four parameters. The first three control the amount of hue in the color (red, green, and blue), and the value can range from 0 to 255. When all three values are 0, you get black, and when all three values are 255, you get white.

The last parameter is the opacity (transparency). It can range from 0 (totally transparent) to 1 (totally opaque). You can think of it as a percentage, so that a value of 0.5 means it’s 50% transparent. Right now, it’s at 0.5, so it’s 50% transparent. You can change it to 0 if you want to see how it would look totally transparent. Or change it to some other level of transparency.

Note that you will not see the transparency until you scroll the page down and you start seeing objects move under the header. That’s because the object behind the header is white, so even though the header is transparent, you won’t see the transparency until there’s something else behind it that’s not white.

You specified that you wanted the menu background to be transparent, but I wrote the selectors for the entire header; I thought it would look a little strange to just have the menu part be transparent and everything else in the header white (like the site title and tag line), but we can try it if you want.