Wordpress seems to be displaying the mobile menu (in Twentythirteen at least) at 643px wide, however i need it to activate at 767px. I cannot seem to be able to find what activates the menu at 643px, it's certainly not in the CSS and i can't seem to find it relating anywhere in the corresponding JS files.

Anyone had experience with this in the past?

  • it is indeed in the style.css file, in the media queries section, around lines 2801 - 2865
    – Milo
    Feb 14, 2014 at 3:39

1 Answer 1


NOTE: Please see edits below

The menu is activated via media queries. Media queries for width<=643px start at line 2771, and those for 767px start at line 2748. Now, to change the breakpoint for the menu, we'll move the mobile menu css from the 643px media query section to the 767px media query. On line 2801 of your style.css, you'll find this

/* 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;

div.nav-menu > ul {
    display: none;

Cut the whole thing and paste it inside the media queries of 767px, just after line 2768, just before the next curly brace.

.gallery-caption {
    display: none;
//paste the thing here

Now save it, and you'll see that your menu breakpoint has changed.

If you want some other breakpoint, other than the standard, you can write your own media query.

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


As @PieterGoosen suggested, these edits should go into a child theme, because if the theme is updated, your edits are lost. In order to do it like that, create a folder with any name in wp-content/themes, create a `style.css in there, and put the following in there.

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

And that's it, activate this new theme and enjoy your customizations.

  • 1
    Don't edit the twenty thirteen theme files, create a child theme and apply the changes in there Feb 14, 2014 at 12:23
  • Worked perfectly, i guess the fact i was trying to do this at 5:30am didn't help - the -2 is fully deserved! ;) Feb 14, 2014 at 13:28
  • @PieterGoosen Yes you're right, thank you. I'll add that to the answer. :) Feb 14, 2014 at 16:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.