Изменение точки активации мобильного меню

Question

Изменение точки активации мобильного меню

14 февр. 2014 г., 05:28:50

Просмотры: 15K

Голосов: -2

В WordPress (по крайней мере в теме Twenty Thirteen) мобильное меню появляется при ширине экрана 643px, однако мне нужно, чтобы оно активировалось при 767px. Я не могу найти, что именно отвечает за активацию меню при 643px - это точно не в CSS и я не нашел этого в соответствующих JS-файлах.

Кто-нибудь сталкивался с подобной проблемой?

Nikki Mather

316

меню css javascript мобильный

Комментарии

это действительно в файле style.css, в разделе медиа-запросов, примерно строки 2801 - 2865

Milo

14 февр. 2014 г. 05:39:52

Все ответы на вопрос

Комментарии

Не редактируйте файлы темы twenty thirteen, создайте дочернюю тему и вносите изменения там

Pieter Goosen

14 февр. 2014 г. 14:23:20

Сработало идеально, думаю, тот факт, что я пытался сделать это в 5:30 утра, не помог - эти -2 полностью заслужены! ;)

Nikki Mather

14 февр. 2014 г. 15:28:56

@PieterGoosen Да, ты прав, спасибо. Я добавлю это к ответу. :)

Kavya Gokul

14 февр. 2014 г. 18:04:40

Kavya Gokul 163 · Accepted Answer · 2014-02-14T05:47:09Z

ПРИМЕЧАНИЕ: Пожалуйста, ознакомьтесь с изменениями ниже

Меню активируется через media queries. Медиазапросы для ширины<=643px начинаются со строки 2771, а для 767px — со строки 2748. Теперь, чтобы изменить точку перелома для меню, мы переместим CSS мобильного меню из раздела медиазапросов 643px в медиазапросы 767px. В строке 2801 вашего style.css вы найдёте следующее:

/* Маленькое меню */
.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;
  }
//вставьте код здесь
}

Теперь сохраните его, и вы увидите, что точка перелома вашего меню изменилась.

Если вам нужна другая точка перелома, отличная от стандартной, вы можете написать свой собственный медиазапрос.

@media(max-width:800px) {
  //css здесь
}

ИЗМЕНЕНИЕ

Как предложил @PieterGoosen, эти изменения следует вносить в дочернюю тему, потому что при обновлении темы ваши правки будут потеряны. Для этого создайте папку с любым именем в wp-content/themes, создайте там файл `style.css` и добавьте в него следующее.

/*
Theme Name:   Twenty Thirteen Child
 Description:  Дочерняя тема Twenty Thirteen
 Author:       Gaurav Pareek
 Template:     twentythirteen
 Version:      1.0.0
 Text Domain:  twenty-thirteen-child
*/

@import url("../twentythirteen/style.css");

/* =Настройка темы начинается здесь
-------------------------------------------------------------- */
@media(max-width:767px) {
    //CSS для меню здесь
    }

Вот и всё, активируйте эту новую тему и наслаждайтесь своими настройками.