How can I customize menu colors in the Palo Alto theme?

Store Design
1

Hi everyone, I need to change the background color of the main menu in Palo Alto Theme, initially it is transparent then scrolling has the generic color of the site background, I would like to be able to set it with a custom color. Also I would like to be able to customize the color of the menu items as well.

url preview https://i4ewijmzuegh6ua0-53666742432.shopifypreview.com

I thank you in advance.

1 Like
2

@krukko77

You can add the following code at the bottom of your assets/theme.css file.

/* for initally open menu */
.site-header--transparent:not(.is-megamenu-open){
background-color: #fffce9;
color: #000 !important;
}
/* for menu when scroll */
.has-scrolled .site-header--fixed{
background-color: #fffce9;
color: #000;
}

The above color will change the menu item’s color and the background color will change the background color. You can change both as per your need.

Hope this helps.

3

Hi @dmwwebartisan and thanks, it works but I had to remove a part because the initial menu was not transparent.

/* for initally open menu /
.site-header–transparent:not(.is-megamenu-open){
color: #fff !important;
}
/ for menu when scroll */
.has-scrolled .site-header–fixed{
background-color: #981f39;
color: #fff;
}

But now I have other problems:

  • I should be able to customize the sidebar menu for mobile, background color and text
  • same thing for the mega menu
  • I would like to be able to customize the font size of the main menu

Thanks