Cambiar el punto de visualización del menú móvil

Question

Cambiar el punto de visualización del menú móvil

14 feb 2014, 05:28:50

Vistas: 15K

Votos: -2

WordPress parece mostrar el menú móvil (al menos en Twenty Thirteen) cuando el ancho es de 643px, pero necesito que se active a los 767px. No logro encontrar qué activa el menú a los 643px, definitivamente no está en el CSS y no parece estar en los archivos JS correspondientes.

¿Alguien ha tenido experiencia con esto anteriormente?

Nikki Mather

316

menús css javascript mobile

Comentarios

efectivamente está en el archivo style.css, en la sección de media queries, aproximadamente entre las líneas 2801 - 2865

Milo

14 feb 2014 05:39:52

Todas las respuestas a la pregunta

Comentarios

No edites los archivos del tema twenty thirteen, crea un tema hijo y aplica los cambios ahí

Pieter Goosen

14 feb 2014 14:23:20

Funcionó perfectamente, supongo que el hecho de que estuviera intentando hacer esto a las 5:30am no ayudó - ¡los -2 están completamente merecidos! ;)

Nikki Mather

14 feb 2014 15:28:56

@PieterGoosen Sí, tienes razón, gracias. Lo agregaré a la respuesta. :)

Kavya Gokul

14 feb 2014 18:04:40

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

NOTA: Por favor revisa las ediciones a continuación

El menú se activa mediante media queries. Las media queries para width<=643px comienzan en la línea 2771, y las de 767px empiezan en la línea 2748. Ahora, para cambiar el punto de ruptura del menú, moveremos el css del menú móvil de la sección de media query de 643px a la de 767px. En la línea 2801 de tu style.css, encontrarás esto:

/* Menú pequeño */
.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;
}

Corta todo y pégalo dentro de las media queries de 767px, justo después de la línea 2768, justo antes de la siguiente llave de cierre.

.gallery-caption {
    display: none;
  }
//pega aquí el código
}

Ahora guárdalo, y verás que el punto de ruptura de tu menú ha cambiado.

Si deseas otro punto de ruptura diferente al estándar, puedes escribir tu propia media query.

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

EDITADO

Como @PieterGoosen sugirió, estas ediciones deberían ir en un tema hijo, porque si el tema se actualiza, tus cambios se perderán. Para hacerlo de esa manera, crea una carpeta con cualquier nombre en wp-content/themes, crea un `style.css ahí dentro, y coloca lo siguiente:

/*
Nombre del Tema:   Twenty Thirteen Child
 Descripción:  Tema hijo de Twenty Thirteen 
 Autor:       Gaurav Pareek
 Plantilla:     twentythirteen
 Versión:      1.0.0
 Dominio de texto:  twenty-thirteen-child
*/

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

/* =La personalización del tema comienza aquí
-------------------------------------------------------------- */
@media(max-width:767px) {
    //el css del menú va aquí
    }

Y eso es todo, activa este nuevo tema y disfruta de tus personalizaciones.