How to change buttons/icons/header/footer hover colour on Debut Theme

TheDogExplained
Excursionist
11 0 4

Hi, few questions here:

1) I managed to change the header & footer text color once you hover over them. But I also want to change all the buttons and icons (like social media sharing, search icon) hover color to 

#fa3100. 

2) I would like to remove the text underline on the header/footer once you hover on it.

3) I would like that only the page you select on the header/footer menu would turn that text to its hover color.

 

Can someone help me out? 

Website: www.thedogexplained.com

Thanks!

dmwwebartisan
Shopify Partner
7483 1776 2381

@TheDogExplained 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.site-footer__copyright-content a:hover, .site-footer__linklist-item a:hover, .site-footer__rte a:hover, .site-nav__link--button:focus, .site-nav__link--button:hover, .site-nav__link:focus .site-nav__label, .site-nav__link:not([disabled]):hover .site-nav__label{
border-bottom: 0px !important;
}
a.site-nav__link.site-nav__link--main.site-nav__link--active {
    color: #fa3100;
}
.site-footer__social-icons .social-icons__link:hover {
    color: #fa3100 !important;
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
TheDogExplained
Excursionist
11 0 4

Hey, thank you so much for the reply! Everything worked perfectly except the buttons, a search icon & menu bars on the mobile screen. Any ideas on how I could also make a #fa3100 hover effect on these objects?

 

Screen-Shot-2021-06-29-at-17.31.19.jpg

dmwwebartisan
Shopify Partner
7483 1776 2381

@TheDogExplained 

Please add the following code.

.btn:focus, .btn:not([disabled]):hover, .shopify-payment-button .shopify-payment-button__button--unbranded:focus, .shopify-payment-button .shopify-payment-button__button--unbranded:not([disabled]):hover{
    background-color: #fa3100 !important;
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
TheDogExplained
Excursionist
11 0 4

Thank you! The buttons worked, however, the search icon and the menu bar on the mobile screen are still blue. 

0 Likes