How to customise spacing between menu items in the WoodMart menu element
-
I would like to decrease the spacing between menu items in the WoodMart menu element. I have tried to select, “Custom” under, “Gap” and add my own spacing but it would not reflect, even if I punched in 0. I have also tried to configure the padding but this does not work as well. I have pasted a link and attached a screenshot below. Have a look and let me know how I can solve this issue.
Attachments:
You must be
logged in to view attached files.
Hello,
Could you please share the URL of the page where these menu items are displayed which you showed in screenshot, along with your WP-Admin login details in the Private Content field? We will check the menu settings on your website and suggest a possible solution.
Best Regards
See attached items below.
Hello,
I have checked your website and found that the menu widget is added inside the mega menu. In the widget’s Style > Items settings, the spacing is currently set to Small, which is the minimum predefined option.
To reduce the spacing further, you can try adding the following CSS under Theme Settings > Custom CSS > Global:
/* Target and reduce vertical spacing in WoodMart vertical menu widget */
.wd-nav-vertical.wd-design-simple,
.wd-menu .wd-nav-vertical {
--nav-gap-v: 0px !important;
--nav-gap: 0px !important;
}
.wd-nav-vertical.wd-design-simple > li > a,
.wd-menu .wd-nav-vertical > li > a {
padding-top: 2px !important;
padding-bottom: 2px !important;
line-height: 1.2 !important;
}
.wd-nav-vertical.wd-design-simple > li,
.wd-menu .wd-nav-vertical > li {
margin-bottom: 0px !important;
}
Best Regards
Hello
I have tried pasting the code under Theme Settings under Global CSS. It does not work. I have also tried pasting it under Appearance, Customisation, Additional CSS. This does not work as well. Is there any other solution you can provide?
Kind regards
Hello,
Please check back your site and check the issue. I have modified the code and added it in theme settings > custom css and it is working fine.
See screenshot for clarification: https://postimg.cc/XG0D9b1s
Please check back your site and check the issue. If you have any questions feel free to contact us.
Best Regards
Thank you very much. One last thing…
Which part of the code alters the spacing? I would like to alter it myself for this project as well as other ones.
Kind regards
Hello,
You can adjust the padding-top, padding-bottom, line-height, and margin-bottom values in the CSS to control the spacing between menu items. Try changing these values to achieve your desired spacing.
Best Regards
.
