[oik] plugins.com

WordPress plugins and themes

  • Home
  • About
    • lazy shortcodes
    • smart shortcodes
    • oik base plugin
      • oik – donate
      • oik PayPal buttons
      • oik installation
      • oik Button Shortcode button
      • oik changelog
      • oik FAQ
      • oik plugins on SVN
      • oik plugins on GitHub
  • Plugins
    • oik base plugin
    • FREE oik plugins
    • WordPress plugins
    • Premium oik plugins
    • Bespoke oik plugins
  • Shortcodes
    • Shortcode examples
  • Blocks
    • Block examples
  • APIs
    • ALL action and filter hooks
  • Blog
  • #
  • &
  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • [

How to fix an unresponsive Menu button in child themes of TwentyTwelve

Recently we noticed that the Menu button in child themes of TwentyTwelve was not behaving correctly; it was not expanding when you clicked on it. We tracked it down to a change in the parent theme, between version 1.4 and 1.5. New versions of oik2012, oik20120 and other bespoke themes built as child themes of TwentyTwelve will be made available in due course. In the mean time, here’s a brief explanation and some notes about our planned fix.

The problem

The TwentyTwelve theme has a responsive menu that reduces to a single Menu button when the window width is narrower than 600 pixels. Pressing the Menu button should reveal the menu, in a vertical list.

1. oik20120 – menu greater than 600 pixels

2. oik20120 – menu less than 600 pixels

3. oik20120 – menu button pressed

With version 1.5, any clicking or pressing on the Menu button is ignored. The menu items do not get displayed. The problem is not restricted to mobile devices – you can recreate the problem with a window width less than 600 pixels.

Fix

The fix requires a change to the header.php file in the child theme. Replace

<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
 
with

<button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
 
Note: This fix will work when the Menu has already been broken due to TwentyTwelve having been upgraded.

Compatibility fix for oik child themes

Q. But what if you deliver a fix to your theme but TwentyTwelve is still at v1.4? A. The fix will cause the problem to occur until TwentyTwelve is upgraded. The solution for oik plugins’ child themes is to use a function that will test the current version of TwentyTwelve, and behave accordingly. In functions.php we add the following function

You appear to be a bot. Output may be restricted


function oik20120_menu_toggle() {
  $installed_theme = wp_get_theme( "twentytwelve" );
  if ( $installed_theme->exists() ) {
    $version =  $installed_theme->get('Version');
    if ( version_compare( $version, 1.5, 'ge' ) ) {
    ?>
      <button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
    <?php } else { ?>    
      <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
    <?php
    }
  }
}
&#91;/bw_api&#93;
and change <code>header.php</code> to use this function
[bw_api]
<?php oik20120_menu_toggle(); ?>
 

oik plugins fix

A version of the above fix will be developed, tested and delivered for the following themes:
  • oik2012
  • oik20120 – Twenty Twelve child theme
  • bespoke themes based on TwentyTwelve

See also

  • wordpress.stackexchange.com/questions/165587/twentytwelve-child-theme-mobile-menu-not-working/166490#166490
  • WordPress TRAC #28824
  • wordpress.org/support/topic/menu-not-opening-on-smartphones?replies=3

Published: October 27, 2014 | Last updated: December 4, 2020

Filed Under: News, oik2012, oik20120, themes

Information

Component:

Recent plugin updates

UK-tides v3.1.1 UK-tides v3.1.1 is built with the latest wp-scripts. It's been tested with WordPress 6.2 and Gutenberg 15.7.0 ...
oik-weight-zone-shipping v0.2.6 oik-weight-zone-shipping v0.2.6 has been tested with WooCommerce 7.4.0. ...
sb-chart-block v1.2.3 SB Chart Block v1.2.3 contains a fix for an Uncaught Error: Call to undefined function bw_trace2()  ...
SB Chart Block v1.2.1 Update to SB Chart Block v1.2.0 for custom colors, font size options and multiple y-axis charts.  ...
oik-css v2.1.0 Update to oik-css v2.1.0 for the ability to style CSS and GeSHi output in documentation. ...

Plugins

  • All Plugins
  • oik base plugin
  • FREE oik plugins
  • WordPress plugins
  • Premium oik plugins

Themes

  • FREE themes
  • Bespoke themes
  • Premium themes

Blocks

  • All Blocks
  • Block examples
  • About Blocks

Shortcodes

  • All Shortcodes
  • Shortcode examples
  • About Shortcodes

Reference

  • About APIs
  • All APIs
  • All Classes
  • All Files
  • All Hooks

Support

  • Contact
  • Cookies policy
  • Get API key
  • Privacy
  • Request support
  • Sitemap
  • Stay informed
  • Terms and Conditions
oik-plugins
Email: oikplug@oik-plugins.com

Weight shipping plugins

Find out which cart weight shipping plugin you need for your WooCommerce site.
Which cart weight based plugin do I need?

Site:  www.oik-plugins.com
© Copyright oik-plugins 2011-2023. All rights reserved.


Website designed and developed by Herb Miller of Bobbing Wide
Proudly powered by WordPress and oik-plugins
WordPress 6.2.2. PHP: 7.4.33. Memory limit: 768M