7B2主题移动端底部菜单栏美化教程
修改文件:b2/Assets/fontend/mobile.css
有些可能不止一个
1.查找:.mobile-footer-menu.footer-fixed{
,将该处替换为
.mobile-footer-menu.footer-fixed{
position: fixed;
padding-bottom: calc(env(safe-area-inset-bottom) + 6px);
}
2.查找:.mobile-footer-menu{,
将该处替换为
.mobile-footer-menu {
transform: translate(0);
transition: transform .5s,background-color .5s ease-out;
box-sizing: border-box;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.9);
border-radius: 12px;
margin: 0 auto;
width: 90%;
bottom: 10px;
}
3.查找:.mobile-footer-menu {,将该处替换为
.mobile-footer-menu {
transform: translate(0);
transition: transform .5s,background-color .5s ease-out;
box-sizing: border-box;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.9);
border-radius: 12px;
margin: 0 auto;
width: 90%;
bottom: 10px;
}
4.查找:.mobile-footer-menu .mobile-footer-center button i {,
将该处替换为
.mobile-footer-menu .mobile-footer-center button i {
font-size: 22px;
color: #fff;
display: block;
text-align: center;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
margin-top: -40px;
}
部分手机显示异常问题
在mobile.css 文件中最底部添加新的CSS样式可解决苹果显示问题
@media screen and (max-width: 768px){
.mobile-footer-menu .mobile-footer-center button i {
right: -30%;
position: absolute;
top: 50%;
}
.mobile-footer-center {
padding: 10px;
}
}
移动端底部菜单栏常驻
目前7B2主题移动端菜单栏往下滑动时会自动隐藏,将以mobile.css中下代码删除,或者注释掉即可常驻,不会自动隐藏了
.mobile-footer-menu.footer-down{
transform: translate(0,100%);
transition: transform .5s,background-color .5s ease-out;
}