Re: Help: change font color of one of the menus

Solved

Help: change font color of one of the menus

abcxytz1234
Explorer
82 1 25

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!

Accepted Solution (1)
abcxytz1234
Explorer
82 1 25

This is an accepted solution.

@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;
}

 

View solution in original post

Replies 11 (11)

ZestardTech
Shopify Partner
5634 1029 1358

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;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
abcxytz1234
Explorer
82 1 25

@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!

Kinjaldavra
Shopify Partner
2302 570 1425

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;
  }

 

abcxytz1234
Explorer
82 1 25

@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

Kinjaldavra
Shopify Partner
2302 570 1425

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;
  }

 

abcxytz1234
Explorer
82 1 25

@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!

abcxytz1234
Explorer
82 1 25

This is an accepted solution.

@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;
}

 

JordanPlayFaire
Tourist
6 0 0

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!

Akibhusen
Shopify Partner
715 121 148

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.

abcxytz1234
Explorer
82 1 25
hang on. let me check if I can change this directly on my theme first
abcxytz1234
Explorer
82 1 25

@Akibhusen hi can i have your email to add?