中间带徽标的水平导航 [英] Horizontal Navigation with Logo in Middle

问题描述

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

I am creating a website on Wordpress and I would like to have a horizontal navigation menu in my header with the logo in the center as a link to the homepage. I have been able to create this look using the Wordpress menu, but when I look at the website on my phone the "home" link is situated in the center, which isn't how I would like it to be ordered.

使用当前模板（HTML）有一种方法可以使用CSS导航菜单看起来类似于这些人： http://bostonscally.com ？

Using the current template (HTML) is there a way to finagle the CSS so the nav menu looks similar to these guys: 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;
}

推荐答案

我最近回答了类似的问题对此。

I recently answered a question similar to this.

可在此处找到：如何将自定义项添加到特定的WordPress菜单项位置

我在上面的答案中说了3个选项。

There are 3 options as i said in the answer above.

jQuery，PHP或HTML / CSS以及它最适合您的选择对于客户来说，这是他们最喜欢的。

jQuery, PHP or HTML/CSS and its down to what you are most comfortable with and if it is for a client, what they most prefer.

我个人会使用PHP方式将导航分成2并将徽标放在中间。

I would personally go with the PHP way and split the navigation in 2 and have the logo in the middle.

所以你需要jQuery版本。

So you'll need the jQuery version.

您的导航需要设置，Home是导航中的第一个元素。这意味着移动版本将将home作为第一个链接。

Your navigation will need to be setup with Home being the first element on the navigation. This will mean that the mobile version will have home as the first link.

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

Next you need to add the jQuery below underneath your inclusion of the jQuery library

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++;
    });
});

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

This code removes the first element from the main nav, being the Home button, then figures out how many is left and places the logo into the middle.

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

You will also need to remove the CSS which adds the logo to the class menu-item-166 as this may cause problems.

希望这可以解决您的问题。

Hope this fixes your problems.

DEMO

这篇关于中间带徽标的水平导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！