我如何改变我的导航栏在我的wordpress网站?

Question

我有一个wordpress网站与cloudpress主题，在style.css我有这段代码的符号，在导航栏是在网站的活动页面，我已经编辑了区域从content: '';到display: block;，因为我的目标是得到一种下划线的页面名称;有人能帮帮我吗?

如果你想看到这段代码是如何在这里的网站:https://breezymodels.rf.gd/

@media (min-width: 992px) {
.navbar5 .nav .nav-item .nav-link {
margin: 0.5rem 0;
}
.navbar5.navbar {padding-bottom: 0;padding-top: 0;}
.navbar5 .header-module {padding: 10px 15px; float: right;}
.navbar5.navbar .nav .nav-item.active .nav-link:after {
content: '';
position: absolute;
height: 2px;
width: auto;
padding: 1px;
background-color: #ffffff;
display: block;
}
}

Answer 1

问题是，由于:after元素没有内容，"width: auto"将返回0。例如，您必须以像素或百分比指定所需的尺寸。

所以，如果你想要某种形式的装饰只是在名字的一部分加下划线，你可以这样做:

.navbar5.navbar .nav .nav-item.active .nav-link:after {
content: '';
position: absolute;
height: 2px;
width: 20px;
padding: 1px;
background-color: #ffffff;
display: block;
}

或者，如果您希望整个名称下划线，则:

.navbar5.navbar .nav .nav-item.active .nav-link:after {
content: '';
position: absolute;
height: 2px;
width: calc(100% - 40px); /*full width excluding padding*/
padding: 1px;
background-color: #ffffff;
display: block;
}

Answer 2

我假设您想在活动菜单元素下面添加一条简单的白线?

这可以简单地使用:

.nav-item.active {
border-bottom: 2px solid #fff;
}

我还建议为你所瞄准的元素创建一个新的样式规则行，现在你瞄准的是多个元素，我认为它们被列为是由于它们共享相同的样式。

同样，你在代码块中做的任何声明:

@media (min-width: 992px) {
///
}

只在窗口尺寸大于992px时生效。