css - 中间带有 Logo 的水平导航

Question

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

使用当前模板 (HTML) 是否有一种方法可以欺骗 CSS，因此导航菜单看起来类似于这些家伙:http://bostonscally.com ？

谢谢!

#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;
}

Answer 1

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

可以在这里找到:How to add a custom item to a specific WordPress menu item position

正如我在上面的回答中所说，有 3 个选项。

jQuery、PHP 或 HTML/CSS 以及您最喜欢的，如果是客户，他们最喜欢的。

我个人会采用 PHP 方式，将导航一分为二，并在中间放置 Logo 。

编辑

因此您需要 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++;
    });
});

此代码从主导航中删除第一个元素，即主页按钮，然后计算出剩余的元素数量并将 Logo 放在中间。

您还需要删除将 Logo 添加到类 menu-item-166 的 CSS，因为这可能会导致问题。

希望这能解决您的问题。

DEMO