Search code examples
htmlcsstwitter-bootstrap

How to delete empty space between ul li elements

I have an ecommerce project that has a huge mega menu with lots of items. For clarity, each li element of the submenu must be one below the other. In my case, I have too large spaces, which you can see on the screenshot.

This is my menu

enter image description here

All of these grey headers must be pulled up one under the other.

I need result like this. See screenshot below this:

enter image description here

This is my code:

<ul  class="mr-auto main-menu mega-menu">
    <li class="menu-item  menu-item-has-children has-sub wide pos-fullwidth col-6 sub-ready">
        <a href="#">Stomatološka oprema</a>
            <div class="popup" style="display: block; left: -117.25px; width: 1883px; right: auto;">
                <div class="inner">
                    <ul class="sub-menu porto-wide-sub-menu">
                        <li id="nav-menu-item-1137" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1" style="width: 16.6667%;"><a href="http://localhost/nova-galenaplus-wp/./stomatoloska-oprema/aparati-i-oprema-stomatoloska-oprema/">Aparati i oprema</a>
                            <ul class="sub-menu">
                                <li id="nav-menu-item-1138" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="#">Amalgamator</a></li>

                                etc...
                            </ul>
                        </li>
                    </ul>
        </li>

Style

.porto-wide-sub-menu {
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.porto-wide-sub-menu>li.sub { 
    display: block;
    position: relative;
    margin: 0;
     
}

What i try

I try to put this in li element to break list but not work.

-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
break-inside: avoid;
display: table;
width: 100%;
padding: 0 !important;

I'm a backend developer and I'm not too familiar with the frontend and especially with css. If someone can advise me how to achieve this. Thanks

Solution

  • Thanks to @Johannes for column-count. With this i slove problem like this

    .porto-wide-sub-menu {
   max-width: 1498px;
    column-count: 6;
    margin: 0 auto;
    column-gap: 18px;
    padding: 20px;
}


.porto-wide-sub-menu>li.sub { 
    break-inside: avoid;
    display: table;
    width: 100% !important;
    padding: 0 !important;
     
}