October 21, 2024
Chicago 12, Melborne City, USA
CSS

How to add Gap / Space in SubMenu


I’m not at all familiar with editing code and have had a hard time building this WordPress site (https://danielpainter.at) for myself (feel free to join the site).

How is it possible to create a distance (gap/spacae) between the buttons in the sub-menu?

Now: now

Should be: should be

The affected code should be

<ul class="sub-menu">
    <li id="menu-item-3259" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3259"><a href="https://www.danielpainter.at/personen/?customize_changeset_uuid=a01ae230-11ac-4842-b96d-97f9812df568&amp;customize_messenger_channel=preview-0&amp;customize_autosaved=on"><span>Personen</span></a></li>
    <li id="menu-item-4657" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4657"><a href="https://www.danielpainter.at/urbex/?customize_changeset_uuid=a01ae230-11ac-4842-b96d-97f9812df568&amp;customize_messenger_channel=preview-0&amp;customize_autosaved=on"><span>Urbex</span></a></li>
</ul>

the css

.navigation .sub-menu, .navigation .children {
    top: 100%;
}
.navigation .sub-menu, .navigation .children {
    position: absolute;
    background: #ffffff;
    width: 200px;
    left: 0;
    top: 60px;
    border: 1px solid #464646;
    text-transform: uppercase;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: 5;
}

I’m not at all familiar with editing code



You need to sign in to view this answers

Leave feedback about this

  • Quality
  • Price
  • Service

PROS

+
Add Field

CONS

+
Add Field
Choose Image
Choose Video