更改移动菜单的显示时间

时间:2014-02-14 作者:Nikki Mather

Wordpress似乎显示643px宽的移动菜单(至少有213个),但我需要它以767px的速度激活。我似乎无法在643px上找到激活菜单的内容,它肯定不在CSS中,而且我似乎无法在相应的JS文件中找到相关内容。

过去有人有过这样的经历吗?

1 个回复
最合适的回答,由SO网友:Kavya Gokul 整理而成

注意:请参见下面的编辑,菜单通过以下方式激活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
    }
就这样,激活这个新主题,享受您的定制。

结束

相关推荐

为什么我不能在这个WordPress主题中添加一个css样式?

我正在尝试向我正在开发的WordPress主题添加CSS样式,如本教程所示:http://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/ 但似乎不起作用,我不明白为什么。这就是head.php 我的个人主题文件:<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.