Hello -
I’m using the Dawn Theme and would like my footer menu text spacing
to be more condensed with little to no spacing in-between the text.
For example:
HOME
TEXT
FAQ
PRIVACY
website domain lscher.love
@Jacob_Beam Will you need menu to be shown as vertical?
Do you need to fix issue, you can write some CSS style
Please add below css code in bottom of assets/section-footer.css file
.footer-block__details-content .list-menu__item–link {
letter-spacing: 0px;
}
thank you.
Hello, this didn’t work - perhaps it’s not letter spacing but line spacing? how would that be written?
and yes im also interested in possibly changing the footer to be horizontal rather than vertical on mobile, but its most important that I figure out the spacing issue between the vertical menu on mobile - thanks
see the attachment here letter-spacing is working properly.
@media screen and (min-width: 750px)
.footer-block__details-content .list-menu__item–link {
letter-spacing: 0;
}
Hi @Jacob_Beam ,
You can follow the instruction below:
- Go to Online Store->Theme->Edit code
- Asset->/section-footer.css->paste below code at the bottom of the file:
.footer-block__details-content>li:not(:last-child) {
margin-right: 0.5rem !important;
}
.footer-block__details-content>:first-child .list-menu__item--link {
letter-spacing: 0;
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
Best regards.
@AvadaCommerce Hello. I tried the above solution but when I did, it did not reduce the line spacing in the footer menus. Instead, it deleted 3 of my 5 page links in one of the footer menus. My store is www.theburpboss.com password: leistu. Can anyone suggest why it didn’t work? Thanks
Line height for footer link
.footer-block__details-content .list-menu__item--link {
line-height: 1.2;
}
This worked @Tijafar! Thanks! Do you know how I can make the text of the menus in the footer white? (#FFFFFF) rather than that greyish color it is now? Thanks!
After checking on mobile, it looks like the code worked to reduce the spacing between footer menu links for desktop but did not reduce spacing for mobile (iPhone). Is these an additional line I can add to reduce the mobile spacing of footer links as well?
footer menu space for mobile
@media screen and (max-width: 989px){
.footer-block__details-content .list-menu__item--link {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
}
footer space between menu
.footer-block__details-content {
margin-bottom: 2rem;
}
@media screen and (max-width: 749px){
.footer-block.grid__item {
margin: 2rem 0;
}
}
footer menu link color
.footer-block__details-content .list-menu__item--link {
color: white;
}
footer menu heading color
.footer-block__heading {
color: rgba(var(--color-foreground),.75);
}
OR
.footer-block__heading {
color: rgba(255,255,255,.75);
}
@tljafar - you are so kind for helping. All four of those made great improvements. I am legally blind and these make a great improvement for my ability to see my website. All the desktop header and footer menus are great. One last question, on mobile, the footer menu headings (Links, Policies, and Newsletter Signup) do not appear to have enlarged when I did this with code at top of bass.css. Is there additional code I can add to base.css or asset>section-footer to increase the header size of footer text?
