jQuery centered inline logo in li

-Use other element as logo -only if screen width more than 750px

by Roberto Apasajja

HTML

<div id="ppp"><img src="https://picsum.photos/44"></div>

<ul id="zzz">
    <li>Home</li>
    <li>Shop</li>
    <li>About</li>
    <li>Blog</li>
    <li>Blog</li>
    <li>Account</li>
</ul>

CSS

ul, li {
    list-style: none;
}
li, #ppp { 
    display: inline-block;
}

JavaScript

$(document).ready(function() {

    if ($(window).width() > 750) {
        var position = $("ul#zzz li").length-1;
        var i = 0;
        $('ul#zzz li').each(function() {

            if ($('ul#zzz li').length %2 != 0){
                if(i == position/2) {
                    $( "#ppp" ).appendTo(this).after();
                }
                i++;
            }else{
                if(i == ( position - 1 ) / 2 ) {
                    $( "#ppp" ).appendTo(this).after();
                }
                i++;
            }

        });
    }
});