WordPress 二级导航栏横向布局 Vieu主题修改

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

本文共925个字,预计阅读时间需要3分钟。


前言

博主的导航二级菜单有点多了,由于新功能不断加入,我把很多功能都放在二级菜单了。甚至还有不够用的,我在顶部又搞了一层快捷按钮栏。不过已有的那么多的导航栏我可不想去删删减减,只能在布局上做手脚了。

Wordpress 二级导航栏横向布局 Vieu主题修改

 

横向布局

导航栏二级菜单竖排十几个,确实影响阅读和观感。于是博主就想着使用 CSS 的 column 属性进行调整。调整下来,目前最完美的结构是 2 列;各列之间间隙宽度是 10px。
Vieus 主题的二级菜单固定了宽度,所以我在新的 CSS 中改为了width:auto;
,具体代码如下。

/*导航栏横向布局www.320nle.com*/
.site-navbar ul.sub-menu {
	width:auto;
	padding:15px;
	text-align:center;
	background:rgba(255,255,255,.9);
	-webkit-columns:2;
	-webkit-column-gap:10px;
	-moz-columns:2;
	-moz-column-gap:10px;
	-ms-columns:2;
	-ms-column-gap:10px;
	columns:2;
	column-gap:10px;
}
.site-navbar .sub-menu li {
	text-align:center;
	width:100px;
}

将上述代码粘贴到主题设置中的 自定义代码>自定义CSS样式 中即可。

Wordpress 二级导航栏横向布局 Vieu主题修改

 

其他主题怎么使用

虽然这个修改不涉及主题层面的修改,但是不同主题对应的标签不太一样,关键参数是 columns column-gap ,针对导航栏的ul和li修改就可以了,需要自己多调试。

 


如果你喜欢 Vieu 主题,顺便介绍一下这款主题。

  • 全站响应式自适应模板
  • VIP会员功能
  • 付费商城
  • 独立下载
  • 回复后可见
  • 后台登录保护
  • 特色登录
  • 全站支持熊掌号
  • 文章图片弹窗预览
  • 支持QQ和微博快速登入
  • 文章分享海报
  • 独立下载
  • .......

Wordpress 二级导航栏横向布局 Vieu主题修改
我看中vieu的除了功能强大,界面美观大方,扁平化。主要还是这样的主题,在 wordpress 主题里清一色的两三百块,而它只要69元。

如果有兴趣的话,可以联系我的QQ:798746476,详细了解。

 

Hey,你好哇。
影视剪辑 | AE | Pr | 电脑技术 | 摄影摄像 | 电影 | 电视剧 | 二次元
我们下次见

本文最后更新于2019年10月5日,已超过 2 个月没更新!

本文首发于320印象,欢迎转载,但是必须保留本文的署名320印象(包含链接)。如您有任何商业合作或者授权方面的协商,请给我留言:admin@mail.320nle.com作者:静海流沙, 转载或复制请以 超链接形式 并注明出处 320印象
原文地址:《WordPress 二级导航栏横向布局 Vieu主题修改》 发布于2019-10-05

分享到:
赞(0) 打赏
您阅读这篇文章共花了: 0小时00分00秒

评论 抢沙发

2 + 3 =


请作者喝杯饮料吧~

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.0主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录