Dawn 9.0 Footer Quick Links Line Spacing

[JustLitWicks]

Hello!

I’d like to adjust the line spacing of only the Quick Links menu box in the footer section. Currently the line spacing is quite large. I would like to be tighter - more like single spacing for any additional links.

Also, I would like to change the font side of the links.

My current view is the Blue background. I would like it to look like the white background (line spacing and font size)

Thank you!

[GemPages]

Hello @JustLitWicks ,

It’s the GemPages Support Team and we are glad to assist you today!

Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

[Geist]

For these types of small changes you can just find the chrome developer tools and inspect the links, there’s even a color picker in the chrome dev tools so you can see what your changes look like. What you described sounds like you need to change the background color of the container and changed the margin of the links.

If you go into chromes dev tools you can play around with it without worrying about breaking anything, once you find something you like then you can update your site’s css.

[flareAI]

Hello @JustLitWicks ,

I am Gina from flareAI app helping Shopify merchants get $6Million+ in sales from Google Search, on autopilot.

To adjust the line spacing and font size of only the Quick Links menu box in the footer section, you can use custom CSS code. Below are the steps to do this.

1. Go to your Shopify admin panel and click on “Online Store” > “Themes”.
2. Find the theme you are using and click “Actions” > “Edit Code”.
3. In the left-hand column, click on “Assets” and then click on “theme.scss.liquid” to open the file.
4. Scroll down to the bottom of the file and add the following code:
   /* Adjust Quick Links menu box line spacing */
   .site-footer .footer__quicklinks ul {
   line-height: 1.2;
   }

/* Adjust Quick Links menu box font size */
.site-footer .footer__quicklinks a {
font-size: 14px;
}

5. To change the background color of the Quick Links menu box to white, add the following code to the same file:

/* Change Quick Links menu box background color to white */
.site-footer .footer__quicklinks {
background-color: #fff;
}

6. Save the changes to the file and refresh your website to see the changes take effect.

Adjust the values in the code as needed to achieve your desired line spacing and font size. You can also change the font family or color by adding additional CSS code.

Gina

[BSS-Commerce]

Hi @JustLitWicks

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[JustLitWicks]

Hello,

my Url is www.justlitwicks.com

I am not comfortable putting my password on a public forum. Please let me know if an alternative solution is possible

[JustLitWicks]

Hi Gina,

I do not have theme.scss.liquid as an option under assets.

[syedsumaimaly]

Hi @JustLitWicks

Follow these Steps:

Go to Online Store Edit Code Find theme.liquid file or base.css

Add the following code in the bottom of the file above tag

a.link.link--text.list-menu__item.list-menu__item--link {
    line-height: 10px;
}