What CSS Affects Spacing Between Dropdown Menu Items?


I have looked at many posts on here in regards to spacing between list items, and I’ve done some tests and I am still stumped. I’m currently attempted to edit this Shopify theme: I would like to reduce the spacing between the words on the dropdown menu.

You can view a working preview of the theme here:

I’ve tried editing padding, line height for anything even vaguely related to the menu, ul and ol lists and nothing seemed to have affected the menu.

Here is the CSS if that helps:

If anyone can point me in the right direction of what I may need to change to effect this, I would be grateful!


How about margin on the li?

Editing the padding reduces the vertical spacing for me.

.site-nav-dropdown .col-1 ul.dropdown li a {
    display: inline-block;
    padding: 0;/* was padding:5px 0*/

Thank you so much, that sorted it - I was looking at the larger spacing values thinking it would be more than just 5px of padding!

Yes unlike margins the padding adds up so you get 10px of padding between the elements which is quite a bit extra.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.