WP知更鸟begin主题自定义导航样式

avatar
avatar
小王先森
384
文章
382
评论
2019年5月21日 2 772

知更鸟制作的 begin 主题自带的导航样式宽大,小王先森不怎么喜欢,就自定义样式了。

方法一:修改主题下的 style.css 文件

找到与如下相同的 id 和 class ,修改后的样式如本站:

//以下为调整导航高度
.site-header-s {
    height: 96px;
}
#menu-container {
    height: 66px;
}
#site-nav{}.main-nav .down-menu li{height:66px;line-height:66px;}

//以下为调整logo与搜索按钮高度
.logo-site,.logo-sites {
    margin: 9px 0 0 5px;
}
.nav-search {
    margin: 20px 5px 0 5px;
}

//以下为宽度小于1025px时调整logo的大小
@media only screen and (max-width: 1025px)
.logo-site img,.logo-sites img {
    max-height: 30px;
    margin: 0;
}

方法二:通过主题选项自定义

通过登陆后台 → 外观 → 主题选项 → 定制风格 → 自定义样式,在框里面添加如下CSS,效果就和本站一样了。

#header-top {
	background:#f0f0f0;
}
#masthead {
        height:99px;
 }
#menu-container {
	height:65px;
}
.logo-site,.logo-sites {
	margin:5px 0 0 -5px;
}
#site-nav .down-menu li {
	height:65px;
	line-height:65px;
}
.nav-search {
	margin:18px 10px 0 5px;
}
@media only screen and (max-width:1025px) {
	#masthead,#menu-container {
	height:50px;
}
#menu-box {
	height:50px;
}
.logo-site,.logo-sites {
	height:50px;
}
.logo-site img,.logo-sites img {
	max-height:35px;
	margin:2px 0 0 -10px;
}
#site-nav-wrap {
	margin:5px 10px 0 0;
}
.mobile-login {
	margin:12px 10px 0 0;
}
.nav-search {
	margin:10px 10px 0 0;
}
}@media only screen and (max-width:900px) {
	#masthead,#menu-container {
	height:45px;
}
#menu-box {
	height:40px;
}
.logo-site,.logo-sites {
	height:40px;
	margin:0 0 0 5px;
}
.logo-site img,.logo-sites img {
	margin:5px 0 0 -10px;
}
#site-nav-wrap {
	margin:0 10px 0 0;
}
.mobile-login {
	margin:7px 10px 0 0;
}
.nav-search {
	margin:5px 10px 0 0;
}
}

 

继续阅读
avatar
  • 本文由 发表于 2019年5月21日
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:2   其中:访客  1   博主  1
    • avatar 小鲤鱼 0

      改动之后主题确实鲜艳很多