Enable SUB-MENUS on MOBILE DEVICES: Twenty Twelve theme

  • Resolved Chi Is Current

    (@jacobbarnett)


    4 years, 10 months ago

    Seeking solution to apply these functions to provide sub-menu functionality on mobile devices.

    These functions thoughtfully provided by: Brahmbhatt (@snehalb890) in a previous topic, though they do not generate sub menu functionality on mobile devices. All menu pages are displayed in one list on mobile devices. Sub menu functionality does appear on desktop and larger format devices.

    functions.php path / file Name: twentytwelve-child/functions.php

    /* Enque child theme  -  jkb  010120 */

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
 
    $parent_style = 'parent-style';
 
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
function enque_childtheme_js() {
    wp_enqueue_script( 'child_theme_js', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '1.0', true );
}

add_action('wp_enqueue_scripts', 'enque_childtheme_js');

    .js path / file Name: twentytwelve-child/js/navagation.js

    jQuery(document).ready(function($){
  if ($(window).width() > 767) {
  }
  else {
    $('.main-navigation li ul').hide();
    $('.menu-item-has-children').has('ul').click(function() {
      $('.menu-item-has-children a').css("display", "block !important");	
      $(this).children().toggle();
    });
  }
});

    Grateful for your assistance. ~:~ Jacob

    • This topic was modified 4 years, 10 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic
    • This topic was modified 4 years, 10 months ago by James Huff.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Chi Is Current

    (@jacobbarnett)

    I was able to resolve the problem of sub-menus on mobile devices using the ‘WP Mobile Menu’ plug-in, in lieu of above scripting. Working well, easy to configure.

    Many Thanks!!!

    Great work guys!

    Could someone please tell me where to find the code that actually creates the Menu button in mobile view so that I can change the look of this button via CSS? Here is what it looks like :

    I am running the 2012 v3.0 theme
    Thank you.

    Hi chaps!

    I finally found the button using the FireFox Inspector in Tools–> Web Developer –>Inspector.

    It’s a great too! Thanks to the Developers at Mozilla FireFox!

    The button is an h3.menu-toggle element. You can apply CSS to this in your style.css preferably in your child theme to change this.

    e.g

    h3.menu-toggle{
	border-width: 5px;
    border-style: solid;
	border-color: silver;
	padding: 2px;
}

    I noticed the padding does not appear .It’s probably something to do with size. I will have a play later. ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Enable SUB-MENUS on MOBILE DEVICES: Twenty Twelve theme’ is closed to new replies.