B2 Pro 主题[社交类型菜单]优化教程

本教程主要小优化了一下【社交类型菜单】样式,把这个菜单改成一层。之前我的子主题就用的这样的样式,但是有些小细节不好,本教程是升级版本

本教程非常简单,先看一下修改效果:

我不推荐春哥把【社交类型菜单】改成这个样式,主要是这个样式可能是个小众喜欢的样式。如果喜欢这个样式大家可以自行修改。

下面是教程:

1、设置顶部菜单样式

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

添加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;
        }
    }

 

我写的css代码不怎么规范?,大家可以根据自己网站风格自行修改~

添加完成后,就实现演示效果了~

WordPressWordPress教程

wordpress文章采集发布批量上传教程(火车头)

2021-5-24 10:38:32

WordPressWordPress教程

WordPress仿B站404页面

2021-5-29 17:09:12

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索