How can I change color in certain sections due custom CSS?

Store Design
, , , ,
1

I was wondering if anyone could help me change the font color for the menulinks to custom color for this section in the theme css:

IMG_6347.jpg
IMG_6347.jpg1244×2208 176 KB

IMG_6348.jpeg
IMG_6348.jpeg2308×2520 1.16 MB

2

Hi @Adamvra

Please send me your store link

3

It’s hard to give instructions without the link to your store. You need to inspect the elements in your browser’s developer tools, identify the class names, and target them in the CSS to change the color.

4

Website is www.zooby.nl and the color code can be #FAF9FE. Thanks.

5

Hi Fadi my bad. Website is www.zooby.nl and the color code can be #FAF9FE. Thanks.

6

Thanks, try this:

summary.search-popdown__toggle.navlink.navlink--icon,
a.navlink.navlink--icon.cart__toggle.cart__toggle--animation {
    color: #FAF9FE;
}
7

Add this code to Custom CSS of that section

.navlink--icon .icon {
color: #FAF9FE !important;
}
8

Aah you are amazing it works only on the icon headings could you also change the menu (Kid Pillow, FAQ, Contact) these still remain black can you adjust this to the colors as well?

9

sure:

summary.search-popdown__toggle.navlink.navlink--icon,
a.navlink.navlink--icon.cart__toggle.cart__toggle--animation,
button.icon-fallback-text.navlink.navlink--icon.js-drawer-open,
a.mobile-navlink.mobile-navlink--level-1,
.menu__item.child .navlink--toplevel {
    color: #FAF9FE;
}
10

You are the best!

11

Happy to help!

12

Hi @Adamvra

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Theme.css

.search-popdown__toggle.navlink.navlink--icon,
a.navlink.navlink--icon.cart__toggle.cart__toggle--animation,
button.icon-fallback-text.navlink.navlink--icon.js-drawer-open,
a.mobile-navlink.mobile-navlink--level-1,
.menu__item.child .navlink--toplevel {
    color: #FAF9FE !important;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly