制作一个具有响应性的Javascript水平导航，标志位于中间

我在这个网站上找到了一个很好的解决方案，在我第一次看到它的时候就开始工作，直到我需要它做更多的事情，我一直在玩它，还没有找到一个解决方案来让它做我需要它做的事情

我正在为客户建立一个网站，因此我需要它能够方便地操作，如果客户想要更改实际的事情顺序，那么在主题的后端建立一个ul/li列表不是一个选项，除非我有一个简单的方法来修改functions.php并更改菜单选项卡的设置方式

这是我的javascript代码，菜单是一个实际的wordpress菜单

jQuery(document).ready(function() {
    jQuery("ul#menu-primary-items").find("li:contains('Home')").hide(); // hides home from navigation
    var position = jQuery("ul#menu-primary-items li").length-1;
    var i = 0;

    jQuery('ul#menu-primary-items li').each(function() {
        if(i == position/2) {
            jQuery(this).after('the img src code is in here');
        }

        i++;
    });
});

在整页的宽度，我需要它看起来像

Link | Link | Link | LOGO IMG | Link | Link |Link

在媒体宽度（themes@media max width是999px）上，我需要它是一个带有

LOGO IMG
WP "MENU" button
Link
Link
Link
Link
Link
Link

它显示为，而不是如上所示

WP "MENU" button
Link
Link
Link
LOGO IMG
Link
Link
Link

---

像这样的事情行得通吗

@media(max-width:whateveryouwant px)
{
   .logo{
   float:right;
   }
}

另一种方法是将元素移动到DOM中。 您可以通过jQuery实现这一点：

if((window).width() <= sizeYouWant){
   $('.logo').insertBefore('#FirstElement');
}

---

if（（window）.width（）检查JQuery代码中的媒体，设置徽标位置：

jQuery(document).ready(function() {
    jQuery("ul#menu-primary-items").find("li:contains('Home')").hide(); // hides home from navigation
    var position = jQuery("ul#menu-primary-items li").length-1;
    var i = 0;

/* check media here */
var isMedia999=false;
isMedia999 = (window.width() < 1000); //true if max width is <=999px
/* chek is done */

if( ! isMedia999)
    jQuery('ul#menu-primary-items li').each(function() {
        if(i == position/2) {
            jQuery(this).after('the img src code is in here');
        }
        i++;
    });

else jQuery('ul#menu-primary-items li').each(function() {
        if(i == 0) { // <== first position if max width 999px
            jQuery(this).after('the img src code is in here');
        }
        i++;
    });
});

jQuery（文档）.ready（函数（）{
jQuery（“ul#menu primary items”）.find（“li:contains（'Home'）”）.hide（）；//从导航中隐藏Home
var position=jQuery（“ul#菜单主项li”）。长度为1；
var i=0；
/*在这里查看媒体*/
var isMedia999=假；
isMedia999=（window.width（）<1000）；//如果最大宽度更好，则为true：使用CSS和2个徽标

1个logo是隐藏的，用于介质宽度>999px，第2个是隐藏的，用于介质谢谢@baldráni，这不完全起作用，但它确实有助于将其从菜单中较小的屏幕尺寸中删除。我必须将其更改为
@media（最大宽度：whateveryouwant px）。logo{display:none；}
在logo类中，浮动它会隐藏图像，但会将其中两个链接从屏幕的中心移到左侧，显示除隐藏图像外，在保持所有内容居中方面没有任何帮助。如何使图像以较小的分辨率显示在菜单上方，我应该在css中也尝试它，还是像else/if函数一样存在为了让它出现？你可以试着在顶部放置一个logo，基本上是
display:none
。你
display:inline
当你谈到
max width:…px
Hmm…在JQuery中管理它，你觉得怎么样？我发布了一个答案.SY.
windows.resize（）{…刷新这里…}
go？它应该只是说“刷新这里”@camilera'Chelle我编辑我的答案。请检查一下。
 jQuery(document).ready(function() {
         myfunc();
         windows.resize(myfunc());           

    });

    function myfunc(){
 jQuery("ul#menu-primary-items").find("li:contains('Home')").hide(); 

                var position = jQuery("ul#menu-primary-items li").length-1;
                var i = 0;

            /* check media here */
            var isMedia999=false;
            isMedia999 = (window.width() < 1000); //true if max width is <=999px
            /* chek is done */

            if( ! isMedia999)
                jQuery('ul#menu-primary-items li').each(function() {
                    if(i == position/2) {
                        jQuery(this).after('the img src code is in here');
                    }
                    i++;
                });

            else jQuery('ul#menu-primary-items li').each(function() {
                    if(i == 0) { // <== first position if max width 999px
                        jQuery(this).after('the img src code is in here');
                    }
                    i++;
                });
            });
    }

@media max-width is 999px {
 .logo#wide { display:none; }
 .logo#tiny { display:inline; }
}
@media min-width is 1000px {
 .logo#wide { display:inline; }
 .logo#tiny { display:none; }
}

 var position = jQuery("ul#menu-primary-items li").length-1;
    var i = 0;

    jQuery('ul#menu-primary-items li').each(function() {
        if(i ==  0) {
           //put logo tiny here for media maxwidth 999px
        }
        if(i == position/2) {
          //  put logo wide here for media minwidth 1000px
        }

        i++;
    });
});