html - 如何在标题中编辑菜单 - wordpress

Question

我需要有关如何开始在我的 wordpress 网站上编辑标题的帮助。我正在使用谷歌浏览器和开发人员工具。我对如何挑选 css 属性并自己编辑它们有点迷茫，希望得到一些帮助。

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

当您将鼠标悬停在它上面时，我希望它显示不透明度，当您单击它时，我希望它标记整个“正方形”。

我在菜单中使用的 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

去除a元素的外边距

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

一旦您将鼠标悬停在导航项上，您就会添加一个半透明的背景。您还可以添加过渡以添加“淡入淡出”动画。

#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;
}

正在使用的样式表: