How to add space between menu and dropdown submenu

Hello .Vagabundo,

On the line 223 in style.css you could change

.menu ul {
    position: absolute;
    top: -999999px;
    opacity: 0;
    left: 0;
    text-align: left;
    background: blue;
}

to

.menu ul {
    position: absolute;
    top: -999999px;
    opacity: 0;
    left: 0;
    text-align: left;
    background: blue;
    margin-top: 10px; /* This is what creates the gap */
}

Or you could go to Appearance >> Menus and select your primary naviagtion menu so you can see the following nav items: Home, Products, Services… etc

Then in the top left had corner or the screen you will see Screen Options – Choose “Show advanced menu properties” >> CSS Classes. You could then add you own class into the sub menu items and add a margin.

thank you for the quick answer. I did what you suggested and the submenu disappear when I try to hover the submenu now. And I realized also that the drop submenu dont work properly in my Ipad.

You won’t be able to simply add a top margin to the submenus. If there’s an actual gap (not just visual) between the top level menu line item and the submenu it contains, moving your cursor over that gap is dead space and the submenu no longer has a reason to display (because the top level menu line item is no longer being hovered).

What you’ll want to do is create a fake space between the elements by adjusting background properties of a few different items. I’ll go through them step by step.

First, remove the background color from the submenu altogether.

.menu ul {
    background: none;
}

With that in place, we’ll take the background color you had on the entire submenu and apply it to the submenu list items instead.

.menu li {
    background: #7297A8;
}

That results in the same look as before. However, you’re now free to add a top padding to the submenu itself (which now has no background) and that will create a visual gap while leaving the structure in place. [continued from the first chunk of CSS]

.menu ul {
    background: none;
    padding-top: 10px;
}

thank you! It just work fine now ??

No problem!