Help: change font color of one of the menus

Store Design
1

Hi

I need help in changing the font color of one of my menus. Currently all the menu font colors are in black. Can I change the font color of “our story” only to this color #ED8E8E when i land on the page? (Across all devices and menus on mobile, desktop, iPad)

Do show me the code to add.
my site: doodlemedo.com

Thanks!

2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.min.css and paste this at the bottom of the file:
.menu__item a.d-flex.align-items-center span {
color: #ED8E8E!important;
}
3

@ZestardTech hi thanks for the code but it changes the font colors of ALL the menus. I am looking to change ONLY “our story” font color in the menu and keep the rest the same in black. can you show me the revised code? thanks!

4

Hi,

To update the color of active page you need to add some code in your menu file. Such as need to add code for additional class when link is active.
This required some custom code. You can add me as a staff. So, I can check & made require changes.

5

hello @abcxytz1234

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

a[href="/pages/our-story"]{
    color: #ED8E8E !important;
  }
1 Like
6

hang on. let me check if I can change this directly on my theme first

1 Like
7

@Kinjaldavra thanks!! color works now but can i keep the active link color to orange too? so on desktop if i hover on it, it will change to this color #F75A0D (like what it does previously) do let me know the revised code

8

hello @abcxytz1234

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

a[href="/collections/shop-art-prints"]:hover{
    color: var(--header-style-1-menu-h-c) !important;
  }
9

@Kinjaldavra hi i want it to be pink (when inactive) but orange when active and this to apply only to “shop art prints” on navigation menu. but it should NOT apply to any other buttons in the site that has the same page link…the revised code doesnt solve that. can you revise this? thanks so much!

10

@Akibhusen hi can i have your email to add?

11

@Kinjaldavra managed to add this code per your message. Added it to min.css intead. Works now thanks!!

@Akibhusen

 #header .menu__panel  .menu__item:nth-child(4) a.d-flex.align-items-center  {
color: #ED8E8E!important;
}
#header .menu__panel  .menu__item:nth-child(4) a.d-flex.align-items-center:hover {
color: rgb(247, 90, 13) !important;
}
#header .menu__panel .menu__item  .menu__dropdown  .menu__list .menu__item a.d-flex{
    color:rgb(69, 67, 69) !important;
}
#header .menu__panel .menu__item  .menu__dropdown  .menu__list .menu__item a.d-flex:hover{
    color: rgb(247, 90, 13) !important;
}
12

Hi Kinjaldavra,

I tried your solution above and this does not work on our theme. We are using a Shopify 2.0 Theme, so this does not have the file Theme.css.

I’m trying to change the ‘Sale’ button on our menu to be highlighted in Red (#F1E5E8) - I added your code to Theme.JS and then also in Theme.css.liquid, and it didn’t work in either. Can you help?

Our site is playfaire.co.uk

Thank you!