Solved

SHOPIFY DAWN THEME FOOTER MENU TEXT SPACING

Jacob_Beam
Excursionist
17 0 12

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

Accepted Solutions (2)
Denishamakwana
Shopify Partner
1408 173 231

This is an accepted solution.

see the attachment here letter-spacing is working properly. 

footermenu.png

@media screen and (min-width: 750px)
.footer-block__details-content .list-menu__item--link {
           letter-spacing: 0;
}
If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

View solution in original post

AvadaCommerce
Shopify Partner
3879 839 945

This is an accepted solution.

Hi @Jacob_Beam ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. 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.

banned

View solution in original post

Replies 14 (14)

DelightCart
Shopify Partner
1223 81 154

@Jacob_Beam Will you need menu to be shown as vertical?

 

Delight Cart - It's time to turn your visitors into loyal shoppers! 

Delight Loyalty - Increase repeat sales quickly and build lifelong customers loyalty.

tljafar
Shopify Partner
28 3 8

Do you need to fix issue, you can write some CSS style

Shopify Developer
If our answer is helpful then please like and accept as solution! Want to modify or custom changes on Shopify store you can Hire me. Feel free to message me on Shopify | Shopify Design Changes | Custom Modifications In to Shopify Theme

Denishamakwana
Shopify Partner
1408 173 231

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.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
Jacob_Beam
Excursionist
17 0 12

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

Jacob_Beam
Excursionist
17 0 12
Denishamakwana
Shopify Partner
1408 173 231

This is an accepted solution.

see the attachment here letter-spacing is working properly. 

footermenu.png

@media screen and (min-width: 750px)
.footer-block__details-content .list-menu__item--link {
           letter-spacing: 0;
}
If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

AvadaCommerce
Shopify Partner
3879 839 945

This is an accepted solution.

Hi @Jacob_Beam ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. 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.

banned
TheBurpBoss
Explorer
54 0 12

@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

tljafar
Shopify Partner
28 3 8

Line height for footer link

.footer-block__details-content .list-menu__item--link {
    line-height: 1.2;
}

 

Shopify Developer
If our answer is helpful then please like and accept as solution! Want to modify or custom changes on Shopify store you can Hire me. Feel free to message me on Shopify | Shopify Design Changes | Custom Modifications In to Shopify Theme
TheBurpBoss
Explorer
54 0 12

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!

tljafar
Shopify Partner
28 3 8

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);
}

 

Shopify Developer
If our answer is helpful then please like and accept as solution! Want to modify or custom changes on Shopify store you can Hire me. Feel free to message me on Shopify | Shopify Design Changes | Custom Modifications In to Shopify Theme
TheBurpBoss
Explorer
54 0 12

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

TheBurpBoss
Explorer
54 0 12

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?

SethBailey
Visitor
1 0 0

I have tried this without any success.

I don't have Asset->/section-footer.css->

I only have theme.css  

The code above did not reduce the line spacing.  

Any suggestions?

Line Spacing.JPG