Different colors for menu items as well as accents on re respective sites

Support
#1

Hello everyone, I am planning to revamp our club website so I upgraded from Theme X to PRO in hope to be more flexible here :slight_smile:

I would like the various main menu items to have different colors that match the club’s logo.
There are a total of 5 different colors.

Firstly, the menu items should reflect these colors, and then the colors should also be used as accents on the respective pages. Each menu item should lead to a page with a separate color theme.

In other words:

Menu item 1 is blue on hover --> leads to a page with blue accents / blue primary color / buttons blue etc.
Menu item 2 is orange on hover --> page with orange accents / orange primary color / buttons orange etc.
Menu item 3 … red
Menu item 4 … green
Menu item 5 … yellow

What is the best way to implement this?

Thanks very much in advance

#2

Hello @user2205649,

Thanks for writing to us.

You’re using the Navigation Inline element, which doesn’t allow individual menu item color customization. Here’s the better approach:

Go to Theme Options → Colors and create your color palette first. Then in the Header Builder, replace the Navigation Inline with Button elements for each menu item. Set custom links matching your menu structure and apply colors from your palette to each button.

Finally, on your pages, set the content colors to match the selected palette for consistency. This gives you full color control over each navigation item.

Hope it helps
Thanks

#3

Thanks for your reply. But how to deal with Subnavigation Items?