更改宽度和中心WordPress的水平菜单项

问题描述：

我目前的工作在以下WordPress站点：更改宽度和中心WordPress的水平菜单项

http://2013.whitehallrow.com/

很明显，横向菜单项不正确的风格。我希望“媒体”链接适合导航栏的右侧;我该如何去改变每件商品的宽度，使它们都适合？

我也希望菜单项被居中，这样每边的边距都是相等的。我对现有Wordpress主题的CSS的知识是粗略的;谁能给我一些指导？

我不认为这是可能的与CSS，因为浏览器根本无法知道项目的宽度将是什么。一种解决方案是单独对边距进行硬编码。其他解决方案是使用Javascript。就我个人而言，我会和前者一起去。如果你使用后者，每次页面加载时都会看到菜单“闪烁”，并且每个人都讨厌这一点。 – 2013-04-23 18:10:49

答

这是一个有点“脏”，因为它是特定于您的菜单和已列入它的名字定制。但也许是有用的：

.main-navigation li { 
    margin: 0 30px 0 0; 
    position: relative; 
} 

/* For the distance of the first element */ 
main-navigation li:first-child { 
    margin-left: 50px; 
} 

/* For nulling the distance of the first child element */ 
.menu-item-type-post_type li:first-child { 
    margin-left: 0; 
}

在同一行上安装菜单项的代码就像一个魅力一样，但是当我在第一个孩子上使用margin-left时，它也会推送每个下拉菜单中的第一个项目。有没有办法只选择直接菜单中的第一个孩子，而不是子菜单？ – Ben 2013-04-23 18:57:17

只需将“.main-navigation li：first-child”更改为“.menu-item-type-post_type li：first-child”即可。 – 2013-04-23 19:24:37

这使得子菜单的第一个项目向右移动，导航链接恢复到之前的状态... – Ben 2013-04-23 19:49:54

答

当然，你可以做到这一点。

查看菜单的css文件并找到.your_menu_name li a部分。在这里寻找填充，只是调整大小。

例如，如果是padding-left:30px;用10替换30并看到你的工作菜单。

您可以通过添加悬停状态像background-color:#CCCCCC;

对不起！ – 5wpthemes 2013-04-23 18:39:16

答

您可以通过使用CSS3伪类:nth-child(N)选择每个菜单项，请参阅this。例如：

.nav-menu li:nth-child(3) { 
    display: block; 
    width: 300px; /*Your individual menu-item width here*/ 
}

结合你的菜单中心，你必须改变你的CSS在style.css（行号：1460）于以下

.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul { 
    border-bottom: 1px solid #8293FF; 
    border-top: 1px solid #8293FF; 
    display: table; 
    text-align: center; 
    width: 100%; 
}

更改宽度和中心WordPress的水平菜单项

相关推荐