WordPress网站7B2主题移动端底部菜单美化

一、效果演示

%title插图%num

二、7B2主题移动端底部菜单栏美化教程

修改文件:b2/Assets/fontend/mobile.css (有些可能不止一个,但是看对应代码就能辨别,差不多的就是)

(转载自许先生,原文https://mrxu.net/105.html,谢谢站长分享)

1.查找:.mobile-footer-menu.footer-fixed{,将该处替换为

 /*修改-bbs.zhiqan.com*/
.mobile-footer-menu.footer-fixed{
position: fixed;
padding-bottom: calc(env(safe-area-inset-bottom) + 6px);
}
/*修改*/

2.查找:.mobile-footer-menu{,将该处替换为

/*修改-bbs.zhiqan.com*/ 
.mobile-footer-menu{
box-shadow: 0 -1px 3px 0 rgba(26,26,26,.1);
padding: 5px;
z-index: 5;
flex-flow: nowrap;
display: flex;
justify-content: space-between;
}
/*修改-bbs.zhiqan.com*/

3.查找:.mobile-footer-menu {,将该处替换为

 /*修改-bbs.zhiqan.com*/ 
.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;
}
/*修改-bbs.zhiqan.com*/

4.查找:.mobile-footer-menu .mobile-footer-center button i {,将该处替换为

/*修改-bbs.zhiqan.com*/ 
.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;
}
/*修改-bbs.zhiqan.com*/

三、部分手机显示异常问题

在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;
}
}

 

收录:
声明:本博客所有文章除特别声明外,均采用© BY-NC-SA。转载请注明出处!
IT趣味分享 https://www.it7v.com/1678
THE END
分享
二维码
打赏
海报
WordPress网站7B2主题移动端底部菜单美化
一、效果演示 二、7B2主题移动端底部菜单栏美化教程 修改文件:b2/Assets/fontend/mobile.css (有些可能不止一个,但是看对应代码就能辨别,差不多的就是) ……
<<上一篇
下一篇>>
文章目录
关闭
目 录