注意:请参见下面的编辑,菜单通过以下方式激活media queries
. 媒体宽度查询(<=643px从2771行开始,767px从2748行开始。现在,要更改菜单的断点,我们将移动菜单css从643px媒体查询部分移动到767px媒体查询。在您的style.css
, 你会发现这个
/* Small menu */
.menu-toggle {
cursor: pointer;
display: inline-block;
font: bold 16px/1.3 "Source Sans Pro", Helvetica, sans-serif;
margin: 0;
padding: 12px 0 12px 20px;
}
.menu-toggle:after {
content: "\\f502";
font-size: 12px;
padding-left: 8px;
vertical-align: -4px;
}
.toggled-on .menu-toggle:after {
content: "\\f500";
vertical-align: 2px;
}
.toggled-on .nav-menu,
.toggled-on .nav-menu > ul {
display: block;
margin-left: 0;
padding: 0;
width: 100%;
}
.toggled-on li,
.toggled-on .children {
display: block;
}
.toggled-on .nav-menu li > ul {
background-color: transparent;
display: block;
float: none;
margin-left: 20px;
position: relative;
left: auto;
top: auto;
}
.toggled-on .nav-menu li > ul a {
color: #141412;
width: auto;
}
.toggled-on .nav-menu li:hover > a,
.toggled-on .nav-menu .children a {
background-color: transparent;
color: #141412;
}
.toggled-on .nav-menu li a:hover,
.toggled-on .nav-menu ul a:hover {
background-color: #db572f;
color: #fff;
}
ul.nav-menu,
div.nav-menu > ul {
display: none;
}
剪切整个内容并将其粘贴到767px的媒体查询中,就在第2768行之后,就在下一个大括号之前。
.gallery-caption {
display: none;
}
//paste the thing here
}
现在保存它,您将看到菜单断点已更改。
如果需要标准以外的其他断点,可以编写自己的媒体查询。
@media(max-width:800px) {
//css here
}
编辑正如@PieterGoosen所建议的,这些编辑应该进入子主题,因为如果主题被更新,您的编辑就会丢失。为了做到这一点,请在
wp-content/themes
, 创建“样式”。css,并将以下内容放入其中。
/*
Theme Name: Twenty Thirteen Child
Description: Twenty Thirteen Child Theme
Author: Gaurav Pareek
Template: twentythirteen
Version: 1.0.0
Text Domain: twenty-thirteen-child
*/
@import url("../twentythirteen/style.css");
/* =Theme customization starts here
-------------------------------------------------------------- */
@media(max-width:767px) {
//menu css goes here
}
就这样,激活这个新主题,享受您的定制。