Want the Sydney menu to show a background color even before the page is scrolled? On pages with a header hero area (slider or image), Sydney’s menu is transparent by default until you scroll. A short CSS snippet gives the menu a visible background right from the top of the page.
In this guide, we’ll walk you through how to add a background color to the Sydney menu in its default state.
Before you get started, make sure you’ve installed and activated the Sydney theme on your WordPress site. If you’re using features from Sydney Pro, ensure that both the Sydney theme and the Sydney Pro plugin are installed and active.
Adding the Menu Background Color
Add the snippet below to your site. You can drop it into Appearance >> Customize >> Additional CSS, or use a child theme if you prefer.
.site-header {
background-color: rgba(72, 181, 206, 0.6);
}The color above includes a bit of transparency. Swap it for a solid hex color (such as #333) if you’d rather have a fully opaque background.
That’s it! You’ve successfully added a background color to the Sydney menu in its default state.
Next, would you like to clean up the mobile view? Check out our guide on Hiding the Mobile Menu Button in Sydney to learn more.
