分享
也是一种美德

WordPress 给移动端底部添加导航菜单

实现方法:

后台→外观→小工具,选中增强文本小工具,将下面代码复制粘贴进去,再把小工具放到页脚小工具即可

<style type=“text/css”>  

.nav{  

display:none;  

}  

@media only screen and (max-width:450px){  

.site-info{  

padding:15px 0 58px 0;  

}  

#advert_widget, .php_text .widget-text, .widget .textwidget{  

padding:0;  

}  

.nav{  

position:fixed;  

z-index:999;  

bottombottom:0;  

width:100%;  

height:40px;  

display:block;  

rightright:0;  

box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);  

-webkit-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);  

-mox-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);  

-o-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);  

-ms-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);  

}  

.nav{  

padding-left:0;  

margin-bottom:0;  

list-style:none;  

}  

.nav span{  

width:50px !important;  

height:50px !important;  

}  

.font-text {  

margin: 0 0 0 5px;  

color: #1ba1e2;  

}  

.nav > ul{  

position:relative;  

z-index:1;  

height:40px;  

background: rgba(255,255,255,.85);  

list-style-type:none;  

margin:0px;  

padding:0px!important;  

}  

.nav  ul  li{  

position:relative;  

float:left;  

width:20%;  

text-align:center;  

margin:0px;  

padding:0px  

list-style-type:none;  

top:5px;  

}  

.nav  ul  li a{  

display:block;  

margin-right:auto;  

margin-left:auto;  

}  

}  

</style>  

<div class=“nav”>  

<ul>  

<li> <a href=“”><span class=“font-text”><i class=“fa-home fa”></i> 首页</span></a></li>  

<li> <a href=“”><span class=“font-text”><i class=“fa-twitch fa”></i> 说说</span></a></li>  

<li> <a href=“”><span class=“font-text”><i class=“fa-link fa”></i> 友链</span></a></li>  

<li> <a href=“”><span class=“font-text”><i class=“fa-comment-o fa”></i> 留言</span></a></li>  

<li> <a href=“”><span class=“font-text”><i class=“fa-info fa”></i> 关于</span></a></li>  

</ul>  

</div>

 

 

赞(0) 打赏
未经允许不得转载:宇峰博客 » WordPress 给移动端底部添加导航菜单
分享到: 更多 (0)

评论 抢沙发

宇峰博客 分享也是一种美德

我的微博我的博客

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏