How to decrease menu padding space via CSS?

1 minute read

This CSS will reduce all paddings to 0. You can change 0 to any number to make your unique spacing:

css

@media (min-width: 1023px) {
.logo_link {
    padding-right: 0px!important;
    margin-right: 0px!important;
}

html body #mega_main_menu.mh-primary > .menu_holder > .menu_inner > ul > li[class*="columns"] {
    margin-right: 0px!important;
}
#mega_main_menu > .menu_holder > .menu_inner > ul > li > .item_link {
    padding-left: 0px!important;
}
html body #mega_main_menu.mh-primary > .menu_holder > .menu_inner > ul > li {
    margin-right: 0px!important;
    margin-left: 0px!important;
}
}

It will look like this:

You can provide own values and breakpoints e.g.

css

@media (min-width:1023px) and (max-width:1100px) {
html body #mega_main_menu.mh-primary > .menu_holder > .menu_inner > ul > li[class*="columns"] {
    margin-right: 0px!important;
}

#mega_main_menu > .menu_holder > .menu_inner > ul > li > .item_link {
    padding-left: 2px!important;
}
.logo_link {
    padding-right: 0px!important;
    margin-right: 0px!important;
}
}

@media (min-width:1101px) and (max-width:1250px) {
html body #mega_main_menu.mh-primary > .menu_holder > .menu_inner > ul > li[class*="columns"] {
    margin-right: 0px!important;
    }

#mega_main_menu > .menu_holder > .menu_inner > ul > li > .item_link {
    padding-left: 12px!important;
}
.logo_link {
    padding-right: 12px!important;
    margin-right: 0px!important;
}
}

In this article you can find information how to add custom CSS to any WordPress Theme: How to add CSS code that is future update compatible

Ask the people who build MyHome WPBakery

We answer by email from support@tangiblewp.com. With Premium Support, we also fix your site when something breaks.

Send us a message What Premium Support covers

We can also run your site for you, or build a new one.

Was this guide helpful?