Move Social Media Icons And Change Text Color When Highlighted

[GeorgeRizos]

1. If you go on the website, you can’t see that the social media icons at the bottom, because they’re white . I would like to have them red and at the right where it says ‘Follow Us’. Like this:

2. I would Like to change the button text color to red on this one:

Edit: Also if I hover over the links in the footer they become white, I would like them to stay red but be underlined just like when you hover over the links in the header section

[ExpertRookie]

hi @GeorgeRizos

Could you share your store URL? Then I can review it

[GeorgeRizos]

Hi @ExpertRookie , thanks for replying!

my url is: https://thesnoozy.com/

password is: 123

[ExpertRookie]

@GeorgeRizos

Add this code at the bottom of Theme > Edit code> assets > base.css

.footer__list-social .list-social__item  .list-social__link {
	color: #8e282a;
}

.footer-block__details-content .list-menu__item--link:hover {
    color: #8e282a;
    text-decoration: underline;
}

.button {
    background: initial !important;
}

Try it and let me know

[GeorgeRizos]

Hi @ExpertRookie , thanks for the help. The social media Icons and the text on the button are now visible. Though the social media icons aren’t at the right side of the footer, also the links in the footer still become white when you hover over it.

Edit: Also I would like the button to be white and the text inside the button to be red if possible

[ExpertRookie]

@GeorgeRizos

Oh sorry, try to replace

.footer-block__details-content .list-menu__item--link:hover {
    color: #8e282a;
    text-decoration: underline;
}

by this

.footer-block__details-content .list-menu__item--link:hover {
    color: #8e282a !important;
    text-decoration: underline !important;
}

[ExpertRookie]

About button, replace this

.button {
    background: initial !important;
}

by this

.button {
    background-color: #ffffff !important;
    color: #8e282a !important;
}

[GeorgeRizos]

Thanks! That did it.

The only thing that’s now left to change is the social media icons position and if possible to change the button to white and the text in the button to red

[ExpertRookie]

@GeorgeRizos

I checked and I’m so sorry to say that CSS cannot move the social position to another position on your store.

[GeorgeRizos]

That’s Okay, thanks for the help. I just have 2 last questions:

1. The button is now white with red letters, but can I make the button on the banner outlined like it was before?

2. Can I make the button that I showed in the screenshot wider?

[ExpertRookie]

@GeorgeRizos

Use this code for the banner button

.banner__buttons .button {
    background: initial !important;
    color: #fff !important;
}

[ExpertRookie]

@GeorgeRizos For button wider

.image-with-text__content .image-with-text__text+.button {
    width: 100%;
}

[GeorgeRizos]

It works perfectly for the desktop version, but it now looks weird in the phone version, is it possible to change it for the phone version only?

Edit: Also, the header buttons are still white in the phone version

[ExpertRookie]

@GeorgeRizos

Search for this string in base.css

a#cart-icon-bubble {
color: #8E282A;
}

and repalce by this

a#cart-icon-bubble {
color: #8E282A;
}
}

[GeorgeRizos]

Great, that did it! Could You also help me with the mobile version. When you open up the nav in mobile it’s all white.