中间带徽标的水平导航

Posted 2023-03-06

【中文标题】中间带徽标的水平导航

【英文标题】：Horizontal Navigation with Logo in Middle

【发布时间】：2014-05-12 20:31:15

【问题描述】：

我正在 Wordpress 上创建一个网站，我希望在我的页眉中有一个水平导航菜单，中间有一个徽标作为主页的链接。我已经能够使用 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;

【问题讨论】：

你能把你的代码贴出来吗？

我已经更新了我上面的问题。感谢您的帮助！

如果您也可以添加标题代码，以便我们可以看到 HTML。我给出了一个很好的概述的答案，以及一个非常相关的以前的问题，应该对你有所帮助。

他们的菜单有两次主页按钮

【参考方案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"  />');
        
        i++;
    );
);

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

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

希望这能解决您的问题。

DEMO

【讨论】：

我的客户足够精通技术，他们应该能够更新自己的网站，但他们没有能力或不知道如何进行 CSS/HTML 更改。理想情况下，我希望他们能够添加/删除导航项，而无需对 CSS 或 HTML 进行任何更改。您可以在此处查看标题/导航：bostonirishclothing.com。您在 header.php 文件中是否有特定的代码？如前所述，我使用的是购买的主题，并且有很多代码可供选择。

对，最好的选择是 jQuery 版本，它在徽标中加载到中心点。我会很快用代码做一个演示，并在接下来的 5/10 分钟内回复您

@user3478950 查看修改后的答案。应该可以解决您的问题。

感谢您的所有帮助。我是 JQuery 的新手并用 Wordpress 实现它，所以我实际上不知道我实际上应该把代码放在哪里。我正在考虑对网站进行一些修补，但我不想将代码放在会使网站崩溃的地方。有没有机会给我指出正确的方向？

当然。放置它的最佳位置是在 header.php 文件中，并将其放在结束头标记 (</head>) 的正上方。这意味着 jQuery 之前被初始化了。确保将其放在<script type="text/javascript"></script> 标记中，以便页面将其视为 JavaScript。如果它确实崩溃，它不会破坏网站的实际功能。它在网页加载后运行。