How can I adjust collection font and spacing on my custom theme?

[Anka_Brimful]

Hi,

My website is www.brimfulshop.com

I have a custom theme which is a several years old. My left nav sidebar typically is just a list, but I recently decided to expand the Accessories collection with sub-collections. You will see that when opened, the text for these four sub collections (Baskets, Mama, Mealtime, and New Baby) is rather close together.

1. How do I increase spacing between these collections?

2. How do I change the font for these collections so that they don’t share the same font as the main collections?

Try as I might, I cannot find where in the theme code I should adjust the spacing or font.

Thanks for the help!

[collinsmbaka]

Hi @Anka_Brimful

Add this CSS rule to the theme.scss.css file

div#sidebar nav .accordion-content {
line-height: 25px;
font-size: 10px;
font-family: ‘Lato’;
}

Update the values to what you want - you might have to use ‘!important’ for any declaration that does not work.

[diego_ezfy]

@Anka_Brimful , do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:

#main-menu *{
    font-family: 'Lato' !important;
}

#main-menu .accordion-content a{
    margin-bottom: 5px !important;
}

To change the bottom spacing, you can change the 5px value.

Kind regards,
Diego

[Anka_Brimful]

Eek - brilliant!

Thank you!

Two more questions ;).

If I want to see how the sub-collections would like slightly indented, what code to I add then? Also, if I want to change the font of JUST these sub-catagories, is that possible?

I am not sure if I will like how it looks, but I’d like to test it out.

I so appreciate your help. You made my day!