wp_nav_menu add div around li

Question

Using wp_nav_menu, currently it's in three columns, what I need is two li's wrapped in a DIV and third wrapped in another DIV. If it can be done via CSS then that would be great, rather than custom wrapper class for the menu.

Not sure how to do this, so would appreciate some assistance. Thanks.

Edit: Added stylesheet, which is using flex.

====  ====  ====

to 

====  ==== 
====

ul {
    display: flex;
    flex-wrap: wrap;
}

ul li {
    flex-grow: 1;
    width: 33%;        
}

<ul>
    <li>
        One
        <ul>
            <li>1a</li>
            <li>1b</li>
            <li>1c</li>
        </ul>
    </li>

    <li>
        Two
        <ul>
            <li>2a</li>
            <li>2b</li>
        </ul>
    </li>

    <li>
        Three
        <ul>
            <li>3a</li>
            <li>3b</li>
            <li>3c</li>
        </ul>
    </li>
</ul>

to 

<ul>
    <div class="col-2">
        <li>
            One
            <ul>
                <li>1a</li>
                <li>1b</li>
                <li>1c</li>
            </ul>
        </li>

        <li>
            Two
            <ul>
                <li>2a</li>
                <li>2b</li>
            </ul>
        </li>
    </div>
    
    <div class="col-4">
        <li>
            Three
            <ul>
                <li>3a</li>
                <li>3b</li>
                <li>3c</li>
            </ul>
        </li>
    </div>
</ul>

You have to add your list styles here. Do they float or are they flex items, inline blocks etc? The solution depend on it. — skobaljic, Oct 14 '21 at 15:18
Does this answer your question? [How to specify an element after which to wrap in css flexbox?](https://stackoverflow.com/questions/19574851/how-to-specify-an-element-after-which-to-wrap-in-css-flexbox) — skobaljic, Oct 14 '21 at 15:28

score 0 · Answer 1 · answered Oct 15 '21 at 15:59

If you aren't looking to change the HTML and just use CSS, then using CSS grid rather than flexbox might be what you are looking for.

    ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        max-width: 200px;
        padding: 0;
        list-style: none;
    }
    ul > li:last-of-type {
        grid-column: 1 / 3;
    }
    ul ul,
    ul ul li {
        display: flex;
    }

<html>
<ul>
    <li>
        One
        <ul>
            <li>1a</li>
            <li>1b</li>
            <li>1c</li>
        </ul>
    </li>

    <li>
        Two
        <ul>
            <li>2a</li>
            <li>2b</li>
        </ul>
    </li>

    <li>
        Three
        <ul>
            <li>3a</li>
            <li>3b</li>
            <li>3c</li>
        </ul>
    </li>
</ul>
</html>

wp_nav_menu add div around li

1 Answers1