Riplus导航栏模糊显示

找导航栏的代码段

在控制台找到header属性

file

修改代码如下:?

/*顶部导航栏模糊*/
.header {
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(61,61,61,.15);
    background: hsla(0,0%,100%,.1);
}

模糊是出来但是导航栏并不是悬浮在首页大图上,控制台找到header-gap把高改成0px就可以了。

代码如下:?

.header-gap {
    height: 0.1px;
}

进入文章页面发现幻灯片位置也上移了,控制台找到.single-top .container把原始的180改成350就可以了,数值自定。 手机版文章页面幻灯片就会变长,但是又不需要直接添加@media (max-width: 1024px)在把数值改回180就好了。

代码如下:?

/*文章页面顶部图片高度*/
.single-top .container {
    min-height: 350px;
}
/*手机网页文章页面顶部图片高度*/
@media (max-width: 1024px) {
.single-top .container {
    min-height: 180px;
}

分类目录子目录的颜色和导航栏不统一,到主题的——顶部设置——顶部菜单导航-背景颜色——选择一个白色,透明度给个75-80在添加下面的代码。

代码如下:?

.site-navbar .sub-menu ul {
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(61,61,61,.15);
}

以上需改可以直接复制到主题的——顶部设置——自定义CSS样式代码

file

完成样式:

file

最终代码:?

/*顶部导航栏模糊*/
.header {
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(61,61,61,.15);
    background: hsla(0,0%,100%,.1);
}
.header-gap {
    height: 0.1px;
}
/*文章页面顶部图片高度*/
.single-top .container {
    min-height: 350px;
}
/*手机网页文章页面顶部图片高度*/
@media (max-width: 1024px) {
.single-top .container {
    min-height: 180px;
}
/*分类子目录模糊*/
.site-navbar .sub-menu ul {
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(61,61,61,.15);
}