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

[user2205649]

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

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.

Home - Förderverein Krebskranker Kinder Trier e.V.

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

[prakash_s]

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

[user2205649]

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

[ruenel]

Hey Florian,

If you have sub-menu items, you can use the Dropdown element to insert them.

• https://theme.co/docs/dropdown

We would love to create a demo for you if you can provide us access to your site.

Thanks.

[user2205649]

Sounds great,
I created a user for you, I will add credentials as secure note.

Many thanks and kind regards
Florian

[ruenel]

Hello Florian,

Check out this demo. The link is in the secure note below.

Thanks.

[user2205649]

Looks quite good! Many thanks!

Is there a possibility to make the sizes of the menu items equal? Also, can I define a different hover color for the dropdown?

[prakash_s]

Hello Florian,

I would suggest you go to the header layout, then go to Button -> Color, click the Interaction tab, and set the hover color. Please have a look at the given screenshot below.

Hope it helps
Thanks