IGNORE THE LAST COMMENT THE PROBLEM AT THE MOMENT IS THE VARIABLE WIDTH. I’M CLOSE TO GETTING RID OF THE BUTTON AND I THINK I CAN DO IT BUT ONE STEP AT A TIME
I am having problems and I don’t know why, five minutes ago I had this working then it just stopped. I’ve reverted and it still doesn’t work. Anyway I want to change the width, where the mobile view starts, from 600px to 760px so all browsers less than 760px see the mobile menu. I got it working by downloading this version of navigation.js
/**
* navigation.js
*
* Handles toggling the navigation menu for small screens.
*/
jQuery( document ).ready( function( $ ) {
var masthead = $( '#masthead' ),
largeWindow = window.matchMedia( 'screen and (min-width: 600px)' ),
timeout = false;
$.fn.smallMenu = function() {
if ( ! masthead.find( '.menu' ).children().length ) {
$( '.menu-toggle' ).remove();
return;
}
masthead.find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' );
masthead.find( '.site-navigation h3' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );
$( '.menu-toggle' ).off( 'click' ).click( function() {
masthead.find( '.menu' ).stop().slideToggle();
$( this ).toggleClass( 'toggled-on' );
} );
};
// Check viewport width on first load.
if ( ! largeWindow.matches )
$.fn.smallMenu();
// Check viewport width when user resizes the browser window.
$( window ).resize( function() {
if ( false !== timeout )
clearTimeout( timeout );
timeout = setTimeout( function() {
if ( ! largeWindow.matches ) {
$.fn.smallMenu();
} else {
masthead.find( '.site-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' );
masthead.find( '.site-navigation h3' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' );
masthead.find( '.menu' ).removeAttr( 'style' );
}
}, 200 );
} );
} );
from here http://phpxref.ftwr.co.uk/wordpress/nav.html?wp-content/themes/twentytwelve/js/theme.js.source.html and changed the min-width call in here to 760px and placed this in my css
@media screen and (min-width: 760px) { !important} /* === Begin 'Mobile View' <=760px; === */
my website is http://www.apalis.co.uk
help would be greatly appreciated, I’m sure I’m missing something small.
OK FOUND THE SOURCE OF THE PROBLEM BUT NOT THE SOLUTION.
/* Minimum width of 600 pixels. */
@media screen and (min-width: 760px) {
/* LINE 1419 */
change that to 760 in the parent CSS it all works great, change it in the child and it messes the site up (that is if i copy the whole “/* =Media queries” section) my navigation.js is expecting 760px but I can’t program the child
PLEASE HELP
