Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
    
it is indeed in the style.css file, in the media queries section, around lines 2801 - 2865 –  Milo Feb 14 at 3:39
add comment

1 Answer 1

up vote 0 down vote accepted

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;
}

ul.nav-menu,
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
}

EDIT

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.

share|improve this answer
1  
Don't edit the twenty thirteen theme files, create a child theme and apply the changes in there –  Pieter Goosen Feb 14 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! ;) –  Nikki Mather Feb 14 at 13:28
    
@PieterGoosen Yes you're right, thank you. I'll add that to the answer. :) –  Gaurav Pareek Feb 14 at 16:04
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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