如何在 header 中编辑菜单 - wordpress

Question

我需要有关如何在我的 wordpress site.I 上开始编辑 header 的帮助，我正在使用 google chrome 和开发人员工具。我对如何挑选 css 属性并自己编辑它们有点迷茫，希望能得到一些帮助。

The URL to my site 我希望它看起来像 wordpress header

当你将鼠标悬停在它上面时，我希望它显示不透明度，当你点击它时，我希望它标记整个 "Square"。

我在菜单中使用的 CSS 是：

.navbar-nav > li > a {
color: #fff;
text-transform: uppercase;
font-weight: bold;
font-family: inherit;
font-size: 12px;
line-height: 15px;
}

.navbar-nav > li > a:hover {
background: rgba(255, 255, 255, 0.8);
transition: background 0.3s;
}

.navbar-nav > li.active > a {
background: rgba(255, 255, 255, 0.8);
}

Answer 1

您要修改的背景颜色在列表元素 (li) 上，而不是锚元素 (a)。我想您可以使用锚元素，但它不会占据导航栏的整个高度，这可能不是您想要的外观。 WordPress会将.active的class添加到当前页面对应的菜单项中。

#main-menu > li:hover,
#main-menu > .active {
     background-color: #8ACEEC;
}

作为旁注，请尽量谨慎使用 !important。它或多或少应该只作为最后的手段使用。

Answer 2

移除 a 元素的边距

.navbar-nav > li > a {
color: #fff;
text-transform: uppercase;
font-weight: bold;
font-family: inherit;
font-size: 12px;
line-height: 15px;
}

悬停导航项后，您将添加半透明背景。您还可以添加过渡以添加 "fade" 动画。

#wpo-mainnav.navbar ul.nav > li:hover > a {
background: rgba(255, 255, 255, 0.8);
transition: background 0.3s;
}

要标记当前类别，只需为该项目添加背景。

#wpo-mainnav.navbar ul.nav > li.active > a {
background: rgba(255, 255, 255, 0.8);
}

* 编辑 *

您的导航项具有 :active 样式，请尝试添加此样式：

.navbar-default .navbar-nav > li > a:active {
color: #434a54;
}

正在使用的样式表：

如何在 header 中编辑菜单 - wordpress

How to edit menu in header - wordpress

html

css

wordpress