Hi,
I want to change color for specific menu in my store, but unfortunately I can’t find any solution for this.
If I want to change the color of one specific menu, such as [PRE-ORDER] button on below the image.
How can I change this with
Hi @Ianlee221 .
Can you send me the link to the store URL and password, so I can help you.
I’m Richard Nguyen from PageFly- Free Landing Page Builder
Hope this answer helps.
Best regards,
Richard | PageFly
@Ianlee221 - can you please share your website link?
Hi,
Please share your store URL and if your store is password protected then also provide password too.
Thank you.
Hi!
Thank you for your response. Here is our store URL : https://itsdcode.jp/
Thank you for your response. Here is our store URL : https://itsdcode.jp/
Hi @Ianlee221 .
I’m Richard Nguyen from PageFly- Free Landing Page Builder
You can go to Online store => themes => actions => edit code and add this code on file theme.css
.header-item header-item--navigation> ul.site-nav.site-navigation.site-navigation--beside.small--hide> li.site-nav__item.site-nav__expanded-item.site-nav--has-dropdown:first-child a{
color: red;
}
Hope this answer helps.
Best regards,
Richard | PageFly
Hi Richard,
Thank you for your help! but unfortunately this code doesn’t work well even I’ve placed it in right place..
@Ianlee221 - please add this css to the end of your theme.css file and check
.site-nav .site-nav__item .site-nav__item:first-child a{color: red;}
Go to header.liquid and find this specific line code {{ link.title }}.
Once you find the specific code mentioned above, add this code {% if link.title == ‘SALE’ %} style=“color: red !important;” {% endif %}
The final code will look like this**<a href=“{{ link.url }}” class=“nav-bar__link link” data-type=“menuitem” {% if link.title == ‘SALE’ %} style=“color: red !important;” {% endif %}>{{ link.title }}**
I attached the screenshots of before and after editing the code for you to visualize.
Let me know if it works with you.
@Ianlee221 - sorry it was my mistake, one item got doubled in previous css, remove that and add line
.site-nav .site-nav__item:first-child a {color: red;}
Great! It works properly! Thank you so much!