how do I wrap my menu in to sub menu using jquery?

Question

this is my site.

this is how I finally make it look like

I want to divide the the menu list items into two sub menu say menu left and right. And then wrap them in a div. This is make it easy for me to style them and this way they would stay responsive as well.

Now, I have been trying to achieve this by

jQuery( ".menu-item-580", ".menu-item-583",".menu-item-584",".menu-item-563").wrapAll("<div class='new' />").after(".menubar-brand");

I have trying this in browser console.

I also tried same above code by using appendTo() instead of after()

But, still no luck.

Answer 1

In your code you're basically doing this:

<ul>
    <li>
    <div class="new">
        <li>
        <li>
    </div>
    <li>
</ul>

which is not a valid markup.

The easiest way to goup <li> s would be to assign different additional css classes to different parts of the list:

<ul>
    <li class="group1">
    <li class="group1">
    <li class="group2">
    <li class="group2">
</ul>

Also, have a look at this: Is there a way to group `<li>` elements?