移动端底部导航小修改-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;
}

修改完后保存   ctrl+F5  强制刷新即可看到效果

类别:WordPress教程

本文收集自互联网,转载请注明来源。
如有侵权,请联系 wper_net@163.com 删除。

评论 (0)COMMENT

登录 账号发表你的看法,还没有账号?立即免费 注册