如何更改我的 wordpress 网站中的导航栏？

Question

我有一个带有 cloudpress 主题的 wordpress 网站，在 style.css 我有这段代码用于导航栏中位于网站活动页面的符号，我已经从content: ''; 到 display: block; 因为我的 objective 是为了给页面名称加上下划线；有人可以帮助我吗？

如果你想用这个代码看看它是怎么回事，这里是网站：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" 将 return 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) {
   ///
}

仅当 window 尺寸大于 992px 时才会生效。

如何更改我的 wordpress 网站中的导航栏？

How can i change my navbar in my wordpress site?

css

wordpress-theming