WordPress.org

Ready to get started?Download WordPress

Forums

[Theme: Twenty Twelve] Responsive Menu 'mobile view' edit (3 posts)

  1. gcoulby
    Member
    Posted 1 year ago #

    First my site, currently in it's DEV stage so be nice, is http://www.apalis.co.uk

    What I want is that when Twenty Twelve theme reaches W:760px; I want the mobile menu to activate. This would replace the mobile activation at 600px;

    Now the menu I am using for browser view has overflow set to hidden. This is causing conflicts in the display of the mobile menu ....namely - no links are visible. What I want is a whole new menu design which activates at 600px; I want the menu to be a black bar like the one there but I don't want a toggle button I want just text (I think I know where to change that just need to make it a link rather than a button) but I also want to change the area so that a drop down box appears with the menu items. On the main page I have included and .png of my proposed menu plan.

    Please help if you can.

    Is it possible to use a second custom menu? or would that require java if statements? I don't want java. However, if there is a php if statement that could do the trick I don't mind that but would need some direction.

  2. gcoulby
    Member
    Posted 1 year ago #

    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.

  3. gcoulby
    Member
    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic