Change menu color Empire theme

Store Design
, , ,

Topic summary

A user seeks help changing the Empire theme’s menu background to orange and text to white.

Solutions Provided:

Two working approaches were offered:

  • Method 1: Add CSS code to assets/theme.css file targeting .site-navigation for background color and navigation link elements for white text
  • Method 2: Insert CSS code in theme.liquid file before the </body> tag

Both solutions successfully resolved the issue, with the original poster confirming the code worked.

New Request:

A different user now asks for more complex navigation styling—specifically replicating katom.com’s hover effects:

  • Main menu: dark gray background that turns red on hover
  • Submenu items: remain red while hovering, turn light gray on individual item hover

This advanced customization request remains unanswered and open for community assistance.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone,
I hope you’re all doing well.
I need some assistance with changing the menu color to orange and the text color to white on the Empire theme. If anyone could provide me with the necessary code, I would greatly appreciate it.
Thank you in advance for your help!

Store URL: https://polycarbonateme.myshopify.com/

1 Like
2

Hello there

  • Go to Online Store → Theme → Edit code.
  • Find the file assets/theme.css and paste the code below at the bottom of the file.
.site-navigation {
background: orange;
}
.site-navigation .navmenu-link-depth-1, .site-navigation .site-header-account-link a {
color: white;
}

devcoders_0-1727602835149.png
devcoders_0-1727602835149.png1350×327 380 KB

1 Like
3

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code

Step 2: Search for the file theme.liquid

Step 3: Add this code before tag

Copy
Result:

If it is helpful, can you kindly give us many likes and mark the solution for us?

This can be a reference for other merchants if they have an issue like you and greatly motivate us to contribute to our community.

Have a nice day, sir!

1 Like
4

Thank you @devcoders it works

1 Like
5

Thank you so mcuh @BSSCommerce-B2B :slightly_smiling_face:

6

Hello @Digital_Imran

You’re welcome! I’m glad it works. Let me know if you need any further assistance!

7

I’m also wanting to change my navigation menu colors but have more complexity. I’m wanting to set up hover colors similar to katom.com. Can you provide the code to match the colors of katom.com? Note the default background of the main menu is a dark grey and changes to red when hovered upon. The main menu remains red while hovering over sub menu items which turn light grey when hovered over.