Hello everyone! I need assistance in changing the color of the header menu, footer menu, and the search icon. Specifically, I would like the color to be modified only for the menus that contain links and the search/cart icon, while leaving the regular text on the page unaffected. Unfortunately, I haven’t been able to find the correct code to achieve this. Any help would be greatly appreciated.
To change the color of the header menu, footer menu, and the search icon in your Shopify theme, you can use CSS code. Here’s an example of how you can modify the color specifically for menus that contain links and the search/cart icon while leaving the regular text unaffected:
/* Change color for menus with links */
.site-header .site-nav a,
.site-footer .site-nav a {
color: #FF0000; /* Replace with your desired color */
}
/* Change color for search/cart icon */
.site-header .header-search-icon,
.site-header .header-cart-icon {
color: #FF0000; /* Replace with your desired color */
}
1 Like
Thank you for the information. However, it doesn’t seem to work for me. I’ve tried using custom CSS within the theme editor, as well as editing the code in theme.liquid and base.css by pasting it at the bottom. Do you know any alternative methods, or am I pasting the code in the wrong location?
Hello @oliverconscire
Could you please provide your store URL and, if it is password protected, please share the password so I can review it and provide a solution?
1 Like
@oscprofessional Absolutely. Thanks!
https://conscire.co.uk/
Password: Conscire9898!
Hello @oliverconscire
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.
.header__menu-item {
color: red !important;
}
.header__active-menu-item {
color: red !important;
}
.footer-block__details-content .list-menu__item--link, .copyright__content a {
color: red !important;
}
1 Like
@oscprofessional That worked perfectly fine. Thank you so much for your help! Much appreciated.
1 Like
@oscprofessional Hello! While I have you here, Would you mind helping me out? I need some assistance in changing the color of additional elements on my website to this specific color #dcc9b6.
Specifically, I need help with the following:
- Search Bar: I would like to change the color of the search icon and the text input field.
- Cart Icon: I want to modify the color of the cart icon and any associated text.
- Mobile Hamburger Menu: I would like to adjust the color of the hamburger menu icon and any associated text when viewed on mobile devices.
- I would also like to change the color of the social media icons for Twitter, Facebook, and Instagram to be set to the color.
Find screenshots below. I would also like to express my gratitude for your previous support, Thank you so much for your time!
