Shopify themes, liquid, logos, and UX
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!
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!
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?
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!
Thank you! The buttons worked, however, the search icon and the menu bar on the mobile screen are still blue.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024