我正在 WordPress 上创建一个网站,我希望在标题中有一个水平导航菜单,中间有徽标作为主页的链接。我已经能够使用 Wordpress 菜单创建此外观,但是当我在手机上查看该网站时,“主页”链接位于中间,这不是我希望的订购方式。
使用当前模板(HTML)有一种方法可以欺骗 CSS,使导航菜单看起来与这些类似:http://bostonscally.com?
Thanks!
#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;
}
我最近回答了一个类似的问题。
在这里能找到它:如何将自定义项目添加到特定的 WordPress 菜单项位置
正如我在上面的答案中所说,有 3 个选项。
jQuery、PHP 或 HTML/CSS,这取决于您最喜欢的,如果是针对客户的,他们最喜欢什么。
我个人会采用 PHP 方式,将导航分成 2 部分,并将徽标放在中间。
EDIT
所以你需要 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++;
});
});
此代码从主导航中删除第一个元素,即“主页”按钮,然后计算出还剩下多少个元素,并将徽标放置在中间。
您还需要删除将徽标添加到类 menu-item-166 中的 CSS,因为这可能会导致问题。
希望这能解决您的问题。
DEMO
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)