WordPress 7b2主题移动端底部导航修改美化

移动端现在是网站使用的主流方向,移动端的美化牵扯网站的使用体验,7b2主题移动端美化底部导航栏,可以快速找到相应的内容,这个跟子比主题移动端的底部导航条非常的相似。

使用教程:

修改

b2/Assets/fontend/mobile.css   中

.mobile-footer-menu.footer-fixed 内容(覆盖原{}中内容)   (宝塔编辑本文中使用搜索即可找到)大概在1153行

.mobile-footer-menu.footer-fixed {position: fixed;padding-bottom: calc(env(safe-area-inset-bottom) + 6px);}一键复制

.mobile-footer-menu 内容(覆盖原{}中内容) (宝塔编辑本文中使用搜索即可找到)大概在2088行

.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;}一键复制

.mobile-footer-menu 内容(覆盖原{}中内容) (宝塔编辑本文中使用搜索即可找到)大概在1163行

.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;}一键复制

.mobile-footer-menu .mobile-footer-center button i 内容(覆盖原{}中内容) (宝塔编辑本文中使用搜索即可找到)大概在2110行

.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;}一键复制

 

免责说明

本站资源部分来自网友投稿,如有侵犯你的权益请联系管理员或给邮箱发送邮件PubwinSoft@foxmail.com 我们会第一时间进行审核删除。
站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到评论下载的文章,评论后刷新页面点击对应的蓝字按钮即可跳转到下载页面
本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar解压,建议下载WinRAR

温馨提示:本站部分付费下载资源收取的费用为资源收集整理费用,并非资源费用,不对下载的资源提供任何技术支持及售后服务。

给TA打赏
共{{data.count}}人
人已打赏
WordPress插件

WordPress AI 自动写文章ChatGPT自动发布OpenAI插件

2023-6-15 12:34:06

WordPress教程

如何在WordPress中设置AdSense自动广告

2023-4-28 17:55:20

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