B2 Pro 主题【社交类型菜单】

释放双眼,带上耳机,听听看~!

教程比较简单,先看一下修改效果:

下面是教程:

1、设置顶部菜单样式

设置项在:B2主题设置 – 模块管理 – 顶部 – 顶部布局样式,选择以下样式:

如果你选择的是其他样式的菜单,请不要添加下面的css代码,避免引起布局样式错乱!

2、添加css样式

请将以下css代码复制到你自己的css中。

以下修改推荐在子主题中修改!

/*优化头部header*/
.site-header.social-top{
height: 58px;
background: #FFFFFF;
}
.logo img{
/*height: 22px;*/
}
.header-banner-left .menu li.current-menu-item a{
color: #121212;
font-weight: 600;
}
.site .site-header-in{
box-shadow: none;
}
.site .site-header-in > div:last-child{
box-shadow: 0px 2px 4px rgb(114 114 117 / 6%);
}
.social-top .header{
height: 58px;
border: none;
background: #fff;
}
.social-top .site.up .header{
background: #fff;
z-index: 7;
}
.top-style-blur{
display: none;
}
.social-top .header-banner{
position: absolute;
}
.social-top .header-banner{
transform: translate(0,0);
transition: transform .3s;
}
.social-top .site.up .site-header-in .header-banner{
transform: translate(0,-58px);
transition: transform .3s,background-color .3s ease-out;
}
.social-top .header .wrapper{
height: 58px;
opacity: 0;
transform: translate(0,20px);
transition: transform .3s,background-color .3s ease-out,opacity .3s;
-webkit-transition: transform .3s,background-color .3s ease-out,opacity .3s; /* Safari */
}
.social-top .site.up .site-header-in{
transform: none;
transition: none;
}
.social-top .site.up .top-style-bottom .wrapper{
opacity: 1;
transform: translate(0,0);
transition: transform .3s,background-color .3s ease-out,opacity .3s;
-webkit-transition: transform .3s,background-color .3s ease-out,opacity .3s; /* Safari */
}
.social-top .header-banner-left .menu li a{
font-size: 15px;
}
.social-top .top-menu ul li.depth-0 > a{
font-size: 15px;
color: #8590A6; /*第二层导航菜单字体颜色修改,可以修改成自己颜色*/
opacity: 1;
height: 58px;
}
.social-top .top-menu ul li.depth-0 > a i{
font-weight: 600;
}
.social-top .mobile-box{
justify-content: normal;
}
.social-top .mobile-box .mobile-show{
display: block;
}
.social-top .mobile-box .top-submit {
position: absolute;
right: 0;
display: flex;
}
/*移动样式优化*/
@media screen and (max-width: 768px){
.social-top .logo img{
/*height: 20px;*/
}
.site-header.social-top{
height: 90px;
}
.social-top .site.up .site-header-in{
transform: translate(0,-43px);
transition: transform .3s,background-color .3s ease-out;
}
.social-top .header .wrapper{
opacity: 1;
transform: none;
}
.social-top .site.up .site-header-in .header-banner{
transform: none;
}
.social-top .top-submit {
display: none !important;
}
}

给TA买糖
共{{data.count}}人
人已赞赏
默认

php代码使用post推送文章至百度

2021-11-19 10:15:45

WordPress主题美化默认

wordpress博客b2主题致美化首页区块

2021-11-24 23:35:38

声明:本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 xutian@ahap.cn 或点击右侧 私信:许天娱乐 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
有新私信 私信列表
搜索