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

今天奇它论坛@老白给大家分享一下WordPress网站7B2主题移动端底部菜单栏的美化教程,其他WordPress主题可能不适用!美化的内容主要是修改了移动端菜单栏的位置,不涉及图标的修改!

1. 效果演示

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

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

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

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

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

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

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

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

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

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

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

3.部分手机显示异常问题

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

4.移动端底部菜单栏常驻

目前7B2主题移动端菜单栏往下滑动时会自动隐藏,将以mobile.css中下代码删除,或者注释掉即可常驻,不会自动隐藏了

/*固定菜单栏---https://www.qitabbs.com/13120.html 
.mobile-footer-menu.footer-down{
transform: translate(0,100%);
transition: transform .5s,background-color .5s ease-out;
}
固定菜单栏https://www.qitabbs.com/13120.html---*/

5.相关美化推荐

这个没啥好推荐的,大家点击文末的标签阅读就行,实时更新,我基本发过什么,我自己都会用的

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

WordPress美化之菜单栏引入阿里巴巴Symbol彩色图标教程-B2主题

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

WordPress-7B2主题美化之菜单栏彩色角标

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

WordPress网站设置侧栏“最近访客”小工具美化版

经验·技巧网站建设

WordPress网站小工具实用美化之一言

2021-12-20 19:32:33

经验·技巧网站建设

WordPress网站防扒代码/禁止F12调试教程-以7b2主题为例

2021-12-21 19:09:37

43 条回复 A文章作者 M管理员
  1. bongxin

    学习一下

  2. 不太正经

    谢谢你 美化侠

  3. 周固固

    12

  4. baozi168

    看看再说

  5. 陌陌上

    呜呜呜呜呜呜

  6. shenhuo

    看看

  7. Deli

    看看

  8. IOUOPU

    看看

  9. 驴仔阿

    看看

  10. 小天11

    看看

  11. adhong

    为啥改完一点变化没有,已经强制刷新了

    是不是教程旧了,春哥已经把美化放进去了?

    • 站长老白

      这个是对位置和样式的调整,不是图标,我这个图标是阿里的第三方图标

    • 站长老白

      这个调整完,它发帖那个“+”号位置会上浮

    • adhong

      这样啊, 还想请教下,我点击移动端底部的“菜单”没反应,没任何跳转,怎么做才能像你那样左侧会弹出菜单呢

    • 站长老白

      你的主题文件有问题,被你改了出问题了,默认的是会弹出的

    • adhong

      我还原成未修改前的数据还是这样,不知道有没有和WP后台菜单设置有关?

    • 站长老白

      你b2后台模块管理设置出问题了估计

    • adhong

      系统bug,重新保存菜单显示位置就好了

  12. adhong

    ??看看

    • adhong

      为啥改完一点变化没有,已经强制刷新了

  13. 阿雨

    看看

  14. 李同学

    感谢

  15. 手掌心

    随便卡看

  16. FEIFEI

    看看看看看看看看

  17. 少羽✨

    看看

  18. 骚凌云

    看看

  19. 黑渊

    ?

  20. FHS

    谢谢

  21. 忘忧

    谢谢

  22. 熊布斯

    感谢

  23. 初心8046

    看看

  24. fnzxl

    谢谢分享

  25. 幕沉

    学习学习

  26. MrXu

    代码以改进,不需要改原主题,望标注出处!?https://mrxu.net/105.html

    • 站长老白

      刚刚看到,不好意思 ,谢谢大佬分享,已加上出处

  27. ‭8717

    看看

  28. 鹅不食草

    挺好看的导航底栏

  29. maomao353

    学习学习

  30. chers

    挺好看的导航底栏

  31. kele4962

    支持支持,学习学习

个人中心
购物车
今日签到
有新私信 私信列表
搜索