How can I change navigation color through code editing?

Store Design
1

Hello, Could someone please assist me with the navigation color? I’m trying to make the background in black, the text in white, and that line underneath in #FC671A color.

I’m interested in changing colors by editing code, therefore, nothing else would change. Your assistance would be deeply appreciated!

Link: www.swish.eu

1 Like
2

@swishlatvija

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
.header__menu-item:hover span, .header__menu-item span, .header__active-menu-item {text-decoration-color: #FC671A;}
1 Like
3

Hello @KetanKumar , thank you very much!!! However, the code changed only the underline. Can you please assist me to make the navigation background in black and the text in white?

1 Like
4

@swishlatvija

yes, please add this code

sticky-header.header-wrapper.color-background-1.gradient.header-wrapper--border-bottom {background: #000;}
.header__menu-item span {color: #fff;}
.header__icon .icon {color: #fff;}
.header__heading-logo {filter: invert(1);}

After Code apply view

KetanKumar_0-1652351466208.png
KetanKumar_0-1652351466208.png1920×1080 225 KB

1 Like
5

Hello, @swishlatvija .

Thank you for reaching out and posting this question!

I understand that you’re looking to change the colors on the navigation menu, and I’m glad to see that you were able to get the help you need from the community! Thanks @KetanKumar !

If you’re looking to further customize the theme or you need more support with your theme, then I’d be happy to check where you can get support for your theme. For this reason, can you clarify which theme you’re using at the moment?

With the Shopify Design Policy, our Theme Support team can assist you with a number of customizations for Shopify-supported themes. You would also be eligible to use the complimentary design time if your store is subscribed to a plan. However, if you’re using a third-party or custom theme, then the best place to start would be with the theme designer as they are best equipped to help you with their third-party/custom coding. That being said, if the theme designer doesn’t offer customization support, then you can also see if it’s something the Shopify Community can help you with or you can consider hiring a developer as well. If you need help finding a developer, then I’d recommend taking a look at our directory of certified developers on Shopify Experts.

I’d love to hear more about your business! What kinds of products do you sell? Do you run any ad campaigns or do you have a marketing plan prepared for your store?

1 Like