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样式 中即可。

 

其他主题怎么使用

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

 


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

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


我看中vieu的除了功能强大,界面美观大方,扁平化。主要还是这样的主题,在 wordpress 主题里清一色的两三百块,而它只要69元。

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

 

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

收集的所有资源均来自网络,仅供私下交流学习之用,任何涉及到商业目的的均不能使用,否则产生的一切后果由您自行承担,提供资源但是不对任何资源负法律责任,所有资源请在你下载后24小时删除。 如有侵权,联系 admin#mail.320nle.com
320印象 » Wordpress 二级导航栏横向布局 Vieu主题修改

发表评论