Cum să modifici lățimea la care apare meniul mobil în WordPress

NOTĂ: Vă rugăm să consultați modificările de mai jos

Meniu este activat prin intermediul media queries. Media queries pentru lățime<=643px încep la linia 2771, iar cele pentru 767px încep la linia 2748. Pentru a schimba punctul de întrerupere pentru meniu, vom muta CSS-ul meniului mobil din secțiunea media query 643px în media query 767px. Pe linia 2801 din fișierul dvs. style.css, veți găsi următoarele:

/* Meniu mic */
.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;
}

Decupați întregul cod și lipiți-l în interiorul media queries pentru 767px, imediat după linia 2768, chiar înainte de următoarea acoladă.

.gallery-caption {
    display: none;
  }
//lipiți codul aici
}

Salvați modificările și veți observa că punctul de întrerupere al meniului s-a schimbat.

Dacă doriți un alt punct de întrerupere, diferit de cel standard, puteți scrie propriul media query.

@media(max-width:800px) {
  //css aici
}

EDITARE

După cum a sugerat @PieterGoosen, aceste modificări ar trebui făcute într-un child theme, deoarece dacă tema este actualizată, modificările dvs. se vor pierde. Pentru a face acest lucru, creați un folder cu orice nume în wp-content/themes, creați un fișier `style.css` în acel folder și adăugați următorul cod:

/*
Theme Name:   Twenty Thirteen Child
 Description:  Child Theme pentru Twenty Thirteen
 Author:       Gaurav Pareek
 Template:     twentythirteen
 Version:      1.0.0
 Text Domain:  twenty-thirteen-child
*/

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

/* =Personalizarea temei începe aici
-------------------------------------------------------------- */
@media(max-width:767px) {
    //css-ul meniului va aici
    }

Și asta este, activați această temă nouă și bucurați-vă de personalizările făcute.