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

Store Design
1

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.

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

  2. 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!

2

@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!

3

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
Screen-Shot-2021-06-29-at-17.31.19.jpg1830×1294 63.7 KB

4

@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!

5

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