教程比较简单,先看一下修改效果:
下面是教程:
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; } }
大家可以根据自己网站风格自行修改~
本文转自载7b2 原文地址https://7b2.com/51174.html
无意侵害您的权益,请发送邮件至 aqiang-212@qq.com 或点击右侧 私信:wpbkw 反馈,我们将尽快处理。
你好.使用了这个css样式后第一层菜单居左第二层菜单居中,怎么把第二层菜单和第一层一样居左。