Menu customization in Palo Alto theme

krukko77
Excursionist
20 0 5

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.

dmwwebartisan
Shopify Partner
4570 1028 1321

@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.

 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
krukko77
Excursionist
20 0 5

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

0 Likes