[Resolved] How to reduce the menu dropdown arrow spacing

[Michael]

Hi. I like the dropdown menu arrows I have activated at https://whatcommilliontrees.org but I’d like them to be tighter to their menu words to the left… like approximately 1/3 or 1/2 the current width tighter. Is there a way to control that spacing, perhaps through some simple CSS? Similarly, on the mobile slide out menu for the site, the dropdown menu arrows are quite distant from their associated menu words. Can those be tightened too?

[Ying]

Hi Michael,

Try this CSS for the arrow position, the default value was 10px:

.menu-item-has-children .dropdown-menu-toggle {
    padding-left: 5px;
}

And this for the slide out menu:

#generate-slideout-menu .slideout-menu li.menu-item-has-children a {
    display: flex;
}

[Michael]

Awesome! Both worked perfectly! Thanks.
Now I need to know… having added these custom css segments in the Customizer, will they disappear with a future theme update (or for any other kind of normal update)? If yes, what is the best solution to that? Simple CSS plugin? A child theme? Or…? I’ve read about child themes, but do not understand how to create one if that is best. Thanks.

[Leo]

No – the CSS in additional CSS will be saved through updates.

[Author]

Posts