Topic: Navigation Padding / Margin

Hello,

To change background color for sub items you need add this code into custom.css file:

.main-nav .menu > li .nav-sublist-dropdown .container > ul > li a {
    background-color: blue;
}
.main-nav .menu > li .nav-sublist-dropdown .container > ul > li a:hover {
    background-color: red;
}

Change the color value to yours.
To change height please use this code:

.main-nav .menu > li .nav-sublist-dropdown .container > ul .menu-item-has-children {
    height: 50px;
}

Also change the value to yours.

Regards,
Eva Kemp.

Hello,

To have margins you can use this code:

.main-nav .menu > li .nav-sublist-dropdown .container > ul .menu-item-has-children {
    margin-top: 10px;
    margin-bottom: 10px;
}

Just change the values.
Please clarify your question regarding “second to 4th level submenus”.
Thank you.

Regards,
Eva Kemp.

Please try to use this code:

.main-nav .menu > li .nav-sublist-dropdown .container > ul .menu-item-has-children .nav-sublist li {
    height: 40px;
}

Regards,
Eva Kemp.

I’ve added the following code into custom.css file:

.main-nav .menu > li .nav-sublist-dropdown .container > ul > li a {
    padding-top: 5px;
    padding-bottom: 5px;
}

Please check the menu now.

Regards,
Eva Kemp.