为wordpress的Twenty Twelve主题定制导航栏菜单

本博客使用的事wordpress模板,个人喜欢简洁,也就选择了Twenty Twelve主题,但是这个主题太淡了,于是开始对其进行改进。首先是导航菜单。这个得编辑style.css了。

个人原创,版权所有,转载请注明原文出处,并保留链接:

http://www.embbnux.com/2014/03/18/wordpress_twentytwelve_theme_nav_menu

style.css文件在wordpress的安装目录下: /wp-content/theme/twentytwelve目录下,不同的主题要到不同的目录下,这里选择twentytwelve。

一 、导航栏背景色

这里采用黑色,如你所见,本站的菜单栏样式。

打开style.css,修改.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul 的属性,找到和下面相似的语句,大概在200多行:


.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
background:black;
display: none;
}

就是添加背景颜色。

二 、更改字体颜色

修改小宽度属性里面的导航栏属性:


/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {

}

找到.main-navigation属性,改为如下语句:


.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
background:black;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
display: inline-block !important;
text-align: left;
width: 100%;
}
.main-navigation ul {
margin: 0;
text-indent: 0;
}
.main-navigation li a,
.main-navigation li {
display: inline-block;
text-decoration: none;
}
.main-navigation li a {
padding: 0 15px 0 15px;
border-bottom: 0;
color: #dfdfdf;
line-height: 3.692307692;
text-transform: uppercase;
white-space: nowrap;

}
.main-navigation li a:hover {
background: #8f8f8f;
color: #fff;

}
.main-navigation li {
margin: 0 40px 0 0;
margin: 0  0 0 10px;
position: relative;
}
.main-navigation li ul {
display: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
z-index: 1;
}
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation ul li:hover > ul {
border-left: 0;
display: block;
}
.main-navigation li ul li a {
background: #efefef;
border-bottom: 1px solid #ededed;
display: block;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}
.main-navigation li ul li a:hover {
background: #e3e3e3;
color: #444;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #ffffff;
font-weight: bold;
}

设置成字体白色,加粗。鼠标停留改变背景色,以及修改间距 margin和padding.这样就完成啦

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Time limit is exhausted. Please reload the CAPTCHA.