Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – 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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After a long search, I was able to find the following

    .navigation .sub-menu,
.navigation .children {
  border: none;
}

.navigation .sub-menu li,
.navigation .children li {
  margin-top:8px;
  padding-top: 0 0;
  border: 1px solid #464646;
  border-bottom: 1px solid #464646;
}

.navigation .sub-menu li:last-of-type,
.navigation .children li:last-of-type {
  border-bottom: 1px solid #464646;
}


  2. 0 
    <ul style="display: flex; flex-direction: column; gap: 10px;">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

    You should define flex for your list than define the direction which is column for your example. Than You should define "gap" prop as above.

    Also how you do it with css:

    ul {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Adjust the gap as needed */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search