Changing when mobile menu is displayed

Question

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.

NOTE: Please see edits below

EDIT

Related Posts: