JSFiddle - React, Tailwind, and code Playground

by lshettyl

HTML

<ul class="nav single-page-nav">
    <li>
        <a href="http://localhost/onyx/#section-45">Chi siamo</a>
    </li>
    <li>
        <a href="http://localhost/onyx/#section-27">Servizi</a>
    </li>
</ul>

<ul id="menu-language" class="nav">
    <li id="menu-item-422" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-422">2nd 1</li>

    <li id="menu-item-185" class="qtranxs-lang-menu qtranxs-lang-menu-it menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-185">2nd 2</li>
</ul>

JavaScript

$(window).resize(function() {
    
    if($(window).width() <= 300) {
        
        $("#menu-language").children().detach(). //detach the LIs
        appendTo("ul.single-page-nav"); //append
    } else {
        
        $("ul.single-page-nav").children().slice(-2). //slice the last 2 LIs
        detach().
        appendTo("#menu-language"); //append
    }
});