Hello!
I am trying to target my footer menu items text to make it smaller, but its only changing the letter spacing, not size. I also would like to customise the hover effect to scale instead of underline.
Thanks in advance,
Ella.
PW: ellaella
Topic summary
A user is attempting to modify footer menu item styling but encountering issues: their CSS changes only affect letter spacing rather than font size, and they want to replace the default underline hover effect with a scale animation.
Proposed Solution:
A respondent provided custom CSS code to be added to the base.css file:
- Sets footer menu links to 10px font size
- Replaces hover underline with a scale transformation (1.1x)
- Includes transition effects for smooth animation
Implementation:
Navigate to: Online Store > Themes > Actions > Edit Code > Asset > base.css, then paste the provided CSS at the bottom.
Note: The original CSS selector in the provided code appears to have a spacing issue (.list-menu __item--link should likely be .list-menu__item--link), though the hover selector is formatted correctly.
Hello @ellacoker ,
Here are the steps to apply the necessary changes in your Shopify store:
- In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
- Locate Asset > base.css and paste the following code at the bottom of the file:
.footer-block__details-content .list-menu__item--link {
font-size:10px !important;
transition:all 0.5s ease;
}
.footer-block__details-content .list-menu__item--link:hover {
transform: scale(1.1);
text-decoration:none !important;
}
Let me know if you need further assistance!