Css 中间带有徽标的水平导航

我正在Wordpress上创建一个网站，我希望在标题中有一个水平导航菜单，中间有一个徽标，作为主页的链接。我已经能够使用Wordpress菜单创建这个外观，但是当我在手机上查看网站时，“主页”链接位于中心，这不是我想要的订购方式

使用当前模板（HTML）有没有办法欺骗CSS，使导航菜单看起来与这些家伙相似：

谢谢

#mpcth_page_header_content #mpcth_logo_wrap #mpcth_logo {
display:none;
}

#mpcth_page_header_content {
text-align: center;
padding: 0px 0px 0px 0px;
}

#mpcth_menu {
font-size: 18px;
font-weight: bold;
padding: 10px;
display: inline-flex;
}

#mpcth_menu .menu-item-166 > a {
  position: relative;
background-image:url('/wp-content/uploads/2014/01/Bostin-Irish-Header_Woo.png');
background-repeat: no-repeat;
background-position: 0px 0px 0px 0px;
width: 300px;
height: 100px;
text-indent: -9000px;
padding: 0px;
}

#mpcth_page_header_content #mpcth_controls_wrap {
padding-right: 2em;
vertical-align: middle;
}

---

我最近回答了一个类似的问题

可以在这里找到：

正如我在上面的回答中所说，有3种选择

jQuery、PHP或HTML/CSS，这取决于您最熟悉的内容，如果是针对客户机，则取决于他们最喜欢的内容

我个人会用PHP方式，在2中分割导航，中间有标志。< /P> 编辑 因此，您需要jQuery版本

您的导航需要设置为主页是导航的第一个元素。这将意味着移动版将有家作为第一个链接

接下来，您需要在包含jQuery库的下面添加jQuery

jQuery(document).ready(function() {
    jQuery("ul#mpcth_menu").find("li:contains('Home')").hide(); // hides home from navigation
    var position = jQuery("ul#mpcth_menu li").length-1;
    var i = 0;
    jQuery('ul#mpcth_menu li').each(function() {
        if(i == position/2) {
            jQuery(this).after('<img src="http://www.bostonirishclothing.com/wp-content/uploads/2014/01/Bostin-Irish-Header_Woo.png" width="250" />');
        }
        i++;
    });
});

jQuery（文档）.ready（函数（）{
jQuery（“ul#mpcth_菜单”）.find（“li:contains（'Home'）”）.hide（）；//从导航中隐藏Home
var position=jQuery（“ul#mpcth_菜单li”）。长度为1；
var i=0；
jQuery（'ul#mpcth_menu li'）。每个（函数（）{
如果（i==位置/2）{
jQuery（this）.after（“”）；
}
i++；
});
});

此代码从主导航中删除第一个元素，即Home按钮，然后计算出剩下多少，并将徽标放置在中间

您还需要删除将徽标添加到类菜单项166的CSS，因为这可能会导致问题

希望这能解决你的问题

---

你能发布你的代码吗？我已经更新了上面的问题。谢谢你的帮助！如果你也可以添加标题代码，这样我们就可以看到HTML了。我的回答提供了一个很好的概述，还有一个非常相关的问题，应该会对你有所帮助。他们的菜单上有两个主页按钮。我的客户非常精通技术，他们应该能够更新自己的网站，但他们没有能力或不知道如何进行CSS/HTML更改。理想情况下，我希望他们能够添加/删除导航项目，而无需对CSS或HTML进行任何更改。在header.php文件中是否有特定的代码？如前所述，我使用的是一个购买的主题，有很多代码可供选择。对，最好的选择是一个jQuery版本，它在徽标中加载到中心点。我会很快用代码做一个演示，然后在5月10日内回来mins@user3478950见经修正的答复。应该能解决你的问题。谢谢你的帮助。我不熟悉JQuery并用Wordpress实现它，所以实际上我不知道我应该把代码放在哪里。我想在网站上做一些修补，但我不想把代码放在会使网站崩溃的地方。你能给我指一下正确的方向吗？当然。最好将其放在

header.php

文件中，并将其放在结束head标记的正上方（

）。这意味着jQuery在之前就已经初始化了。确保将其放入

标记中，以便页面将其视为JavaScript。如果网站崩溃，它不会破坏网站的实际功能。它在网页加载后运行。