My Magazine Pro theme does not feature mobile hamburger menu

[ilkweb]

I've been running Magazine Pro for several years, but just do not have the mobile menu as shown in the instruction guide (bottom of the page):

https://my.studiopress.com/documentation/magazine-pro-theme/customize-your-settings/menus/

Here's what my menu looks like on a mobile (I used CSS to hide the header):

I'm using a "sticky menu" for desktop viewports.

Any tips on what I'm missing here?

Edit: I compared my website to another that is also using Magazine Pro. Their's has the hamburger menu.

For what I can tell, I am missing some code from the viewport where the mobile menu would normally kick in.

Here's what I have:

@media only screen and (max-width:768px) {
    .footer-widgets,
    .nav-secondary,
    .site-footer,
    .site-header,
    .site-inner {
        padding-left: 5%;
        padding-right: 5%
    }
    .genesis-nav-menu>.first>a {
        padding-left: 20px
    }
    .nav-primary .responsive-menu {
        display: none
    }
    .nav-primary #responsive-menu-icon {
        display: block;
        text-align: center
    }
    .primary-nav .site-header {
        padding-top: 140px;
    }

    .home-bottom .featured-content .entry,
    .home-middle .featured-content .entry {
        padding-bottom: 20px
    }
    .archive-pagination li a {
        margin-bottom: 4px
    }
    .five-sixths,
    .four-sixths,
    .one-fourth,
    .one-half,
    .one-sixth,
    .one-third,
    .three-fourths,
    .three-sixths,
    .two-fourths,
    .two-sixths,
    .two-thirds {
        margin: 0;
        width: 100%
    }

    .tagline1 {
        text-align: center;
        padding: 10px;
        height: 100%
    }
    .tagline1 p {
        font-size: 16px
    }
    .socialcontainer {
        margin: 0 auto 10px;
        width: 100%
    }
    .site-title {
        font-size: 44px
    }
    .site-header .wrap {
       
    }
    .subscribe .textwidget #optin {
        width: 100%
    }
	
}

Compare this to the other site which has a mobile menu:

@media only screen and (max-width: 768px) {
 .footer-widgets,  .nav-secondary,  .site-footer,  .site-header,  .site-inner {
 padding-left: 5%;
 padding-right: 5%;
}
 .genesis-nav-menu > .first > a {
 padding-left: 20px;
}
 .genesis-nav-menu.responsive-menu > .menu-item > .sub-menu,  .genesis-nav-menu.responsive-menu {
 display: none;
}
 .genesis-nav-menu.responsive-menu .menu-item,  .responsive-menu-icon {
 display: block;
}
 .genesis-nav-menu.responsive-menu .menu-item {
 margin: 0;
}
 .genesis-nav-menu.responsive-menu .menu-item:hover {
 position: static;
}
 .genesis-nav-menu a {
 line-height: 1;
 padding: 18px 20px;
}
 .genesis-nav-menu.responsive-menu .menu-item-has-children {
 cursor: pointer;
}
 .genesis-nav-menu.responsive-menu .menu-item-has-children > a {
 margin-right: 60px;
}
 .genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
 content: "\f347";
 float: right;
 font: normal 16px/1 'dashicons';
 height: 16px;
 padding: 16px 20px;
 right: 0;
 text-align: right;
 z-index: 9999;
}
 .genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
 content: "\f343";
}
 .nav-primary .genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
 color: #fff;
}
 .genesis-nav-menu.responsive-menu .sub-menu {
 background-color: rgba(0, 0, 0, 0.05);
 border: none;
 left: auto;
 opacity: 1;
 position: relative;
 -moz-transition:    opacity .4s ease-in-out;
 -ms-transition:     opacity .4s ease-in-out;
 -o-transition:      opacity .4s ease-in-out;
 -webkit-transition: opacity .4s ease-in-out;
 transition:         opacity .4s ease-in-out;
 width: 100%;
 z-index: 99;
}
 .genesis-nav-menu.responsive-menu .sub-menu .sub-menu {
 background-color: transparent;
 margin: 0;
 padding-left: 25px;
}
 .genesis-nav-menu.responsive-menu .sub-menu li a,  .genesis-nav-menu.responsive-menu .sub-menu li a:hover {
 background: none;
 border: none;
 padding: 14px 20px;
 position: relative;
 width: 100%;
}
 .home-bottom .featured-content .entry,  .home-middle .featured-content .entry {
 padding-bottom: 20px;
}
 .archive-pagination li a {
 margin-bottom: 4px;
}
 .five-sixths,  .four-sixths,  .one-fourth,  .one-half,  .one-sixth,  .one-third,  .three-fourths,  .three-sixths,  .two-fourths,  .two-sixths,  .two-thirds {
 margin: 0;
 width: 100%;
}
 .magazine-home .content .genesis_responsive_slider h2,  .magazine-home .content .genesis_responsive_slider h2 a {
 font-size: 20px;
 line-height: 1.2;
}
 .magazine-home .content .genesis_responsive_slider .slide-excerpt-border p {
 display: none;
}
}

[Anita]

What version of Magazine Pro do you have on your website? Please provide a link so we can take a look at the website.

---

Love coffee, chocolate and my Bella!

[ilkweb]

Hi Anita,

I'm running Version: 3.0.1.

Here's a link to my stylesheet.

I tried adding the stylesheet from the most recent version of Magazine Pro (Version: 3.3.0) to my WAMP localhost copy of my site.

The layout aesthetics changed, but the mobile hamburger menu was not present in the narrow viewports.

I believe I'm missing some javascript, among other things.

[Anita]

Yes, you need the JS files, but not having an actual link to a website is not very helpful because I cannot see what you are working with.

---

Love coffee, chocolate and my Bella!

[ilkweb]

Here's the link: https://www.smallbizgeek.co.uk/

[Anita]

Looks like you need either update the theme all together or grab the new files, get the JS files and enqueue them with the responsive CSS.

---

Love coffee, chocolate and my Bella!

[ilkweb]

Hi Anita,

Thanks for your response. I've been comparing my js files from 2015 compared to when the js files of Magazine were updated by StudioPress.

Here's a screenshot comparing them. I can see some are different and wonder if it's safe to simply copy across the new ones to the older folder.

I am running my site in WAMP as a localhost so there's no danger of messing anything up permanently.

Right-click the image below and choose "open image in new tab".

Also, I've compared the "new" and "old" functions.php and notices I'm missing code in my file pertaining to the js for mobile menus.

Here's what I believe I'm missing from my functions.php:

	wp_enqueue_script(
		'magazine-responsive-menu', get_stylesheet_directory_uri() . '/js/responsive-menus' . $suffix . '.js',
		array( 'jquery' ),
		CHILD_THEME_VERSION,
		true
	);

	wp_localize_script(
		'magazine-responsive-menu',
		'genesis_responsive_menu',
		magazine_responsive_menu_settings()
	);

}

// Define our responsive menu settings.
function magazine_responsive_menu_settings() {

	$settings = array(
		'mainMenu'    => __( 'Menu', 'magazine-pro' ),
		'subMenu'     => __( 'Submenu', 'magazine-pro' ),
		'menuClasses' => array(
			'combine' => array(
				'.nav-primary',
				'.nav-header',
				'.nav-secondary',
			),
		),
	);

	return $settings;

}

Here's an entire print out of my functions.php, including my customisations:

<?php
//* Start the engine
include_once( get_template_directory() . '/lib/init.php' );

//* Set Localization (do not remove)
load_child_theme_textdomain( 'magazine', apply_filters( 'child_theme_textdomain', get_stylesheet_directory() . '/languages', 'magazine' ) );

//* Child theme (do not remove)
define( 'CHILD_THEME_NAME', __( 'Magazine Pro Theme', 'magazine' ) );
define( 'CHILD_THEME_URL', 'http://my.studiopress.com/themes/magazine/' );
define( 'CHILD_THEME_VERSION', '3.0.1' );

// Enable PHP in widgets
add_filter('widget_text','execute_php',100);
function execute_php($html){
     if(strpos($html,"<"."?php")!==false){
          ob_start();
          eval("?".">".$html);
          $html=ob_get_contents();
          ob_end_clean();
     }
     return $html;
}

/**
 * Add SVG capabilities
 */
function smallbizgeek_svg_mime_type( $mimes = array() ) {
  $mimes['svg']  = 'image/svg+xml';
  $mimes['svgz'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'smallbizgeek_svg_mime_type' );

//* Add Shortcode
function youtubeilk_function() {
  return '<div class="g-ytsubscribe" data-channel="ilkestonwebdesign" data-count="default" data-layout="full"></div>';
}

add_shortcode('youtubeilk', 'youtubeilk_function');

//* Universally Parse Shortcodes
add_filter('widget_text', 'do_shortcode');

//* Add HTML5 markup structure
add_theme_support( 'html5' );

//* Run Smilies function through text widget sidebars
add_filter( 'widget_text', 'convert_smilies' );

//* Add viewport meta tag for mobile browsers
add_theme_support( 'genesis-responsive-viewport' );

//* Add new image sizes
add_image_size( 'home-middle', 360, 200, true );
add_image_size( 'home-top', 750, 300, true );
add_image_size( 'sidebar-thumbnail', 100, 100, true );

/** Display related posts in Genesis based on Category  */

function related_posts_categories() {
if ( is_single ( ) ) {
global $post;
$count = 0;
$postIDs = array( $post->ID );
$related = '';
$cats = wp_get_post_categories( $post->ID );
$catIDs = array( );{
foreach ( $cats as $cat ) {
$catIDs[] = $cat;
}

$args = array(
'category__in'          => $catIDs,
'post__not_in'          => $postIDs,
'showposts'             => 3,
'ignore_sticky_posts'   => 1,
'orderby'               => 'rand',
'tax_query'             => array(
array(

'taxonomy'  => 'post_format',
'field'     => 'slug',
'terms'     => array(
'post-format-link',
'post-format-status',
'post-format-aside',
'post-format-quote' ),
'operator' => 'NOT IN'
)

)

);

$cat_query = new WP_Query( $args );

if ( $cat_query->have_posts() ) {

while ( $cat_query->have_posts() ) {

$cat_query->the_post();

$related .= '<li><a href="' . get_permalink() . '" rel="bookmark" title="Permanent Link to' . get_the_title() . '">' . get_the_title() . '</a></li>';

}

}

}

if ( $related ) {

printf( '<div class="related-posts"><h3>Related Posts</h3><ul>%s</ul></div>', $related );

}

wp_reset_query();

}

}

add_action( 'genesis_after_entry_content', 'related_posts_categories' );

//* Add support for additional color styles

add_theme_support( 'genesis-style-selector', array(
	'magazine-pro-blue'   => __( 'Magazine Pro Blue', 'magazine' ),
	'magazine-pro-green'  => __( 'Magazine Pro Green', 'magazine' ),
	'magazine-pro-orange' => __( 'Magazine Pro Orange', 'magazine' ),
) );

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'default-text-color'     => '000000',
	'header-selector'        => '.site-title a',
	'header-text'            => false,
	'height'                 => 172,
	'width'                  => 380,

) );

//* Reposition the primary navigation menu
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before_header', 'genesis_do_nav' );

//* Add primary-nav class if primary navigation is used
add_filter( 'body_class', 'backcountry_no_nav_class' );
function backcountry_no_nav_class( $classes ) {

	$menu_locations = get_theme_mod( 'nav_menu_locations' );

	if ( ! empty( $menu_locations['primary'] ) ) {
		$classes[] = 'primary-nav';
	}

	return $classes;
}

//* Customize search form input box text
add_filter( 'genesis_search_text', 'magazine_search_text' );
function magazine_search_text( $text ) {

	return esc_attr( __( 'Search the site ...', 'magazine' ) );	
}

//* Customize search form input box text
add_filter( 'genesis_search_text', 'sp_search_text' );
function sp_search_text( $text ) {
return esc_attr( 'Search...' );
}

//* Modify the size of the Gravatar in the author box
add_filter( 'genesis_author_box_gravatar_size', 'magazine_author_box_gravatar' );
function magazine_author_box_gravatar( $size ) {
	return 140;
}

// Allow HTML in author bio section 
remove_filter('pre_user_description', 'wp_filter_kses');

//Add sanitization for WordPress posts
add_filter( 'pre_user_description', 'wp_filter_post_kses');

//* Modify the size of the Gravatar in the entry comments
add_filter( 'genesis_comment_list_args', 'magazine_comments_gravatar' );
function magazine_comments_gravatar( $args ) {

	$args['avatar_size'] = 100;
	return $args;

}

//* Remove entry meta in entry footer

add_action( 'genesis_before_entry', 'magazine_remove_entry_meta' );

function magazine_remove_entry_meta() {

	

	//* Remove if not single post

	if ( ! is_single() ) {

		remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_open', 5 );
		remove_action( 'genesis_entry_footer', 'genesis_post_meta' );
		remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_close', 15 );

	}

}

//* Hooks after-entry widget area to single posts

add_action( 'genesis_entry_footer', 'magazine_after_entry_widget'  ); 

function magazine_after_entry_widget() {

    if ( ! is_singular( 'post' ) )
    	return;

    genesis_widget_area( 'after-entry', array(
		'before' => '<div class="after-entry widget-area"><div class="wrap">',
		'after'  => '</div></div>',

    ) );

}

//* Remove comment form allowed tags
add_filter( 'comment_form_defaults', 'magazine_remove_comment_form_allowed_tags' );
function magazine_remove_comment_form_allowed_tags( $defaults ) {
	$defaults['comment_notes_after'] = '';
	return $defaults;

}

//* Add support for 3-column footer widgets
add_theme_support( 'genesis-footer-widgets', 3 );

//* Register widget areas
genesis_register_sidebar( array(
	'id'          => 'home-top',
	'name'        => __( 'Home - Top', 'magazine' ),
	'description' => __( 'This is the top section of the homepage.', 'magazine' ),

) );

genesis_register_sidebar( array(
	'id'          => 'home-middle',
	'name'        => __( 'Home - Middle', 'magazine' ),
	'description' => __( 'This is the middle section of the homepage.', 'magazine' ),

) );

genesis_register_sidebar( array(
	'id'          => 'home-bottom',
	'name'        => __( 'Home - Bottom', 'magazine' ),
	'description' => __( 'This is the bottom section of the homepage.', 'magazine' ),
) );

genesis_register_sidebar( array(
	'id'          => 'after-entry',
	'name'        => __( 'After Entry', 'magazine' ),
	'description' => __( 'This is the after entry section.', 'magazine' ),

) );

//Register WP Meet Up Header Right
function cgp_extra_widgets() {
	genesis_register_sidebar( array(
	'id'          => 'wp-meet-up-header',
	'name'        => __( 'WP Meet Up Header Right', 'genesischild' ),
	'description' => __( 'This is the WP Header Right', 'genesischild' ),
	) );
}
add_action( 'widgets_init', 'cgp_extra_widgets' );

function cgp_add_second_header_right() {
	if (is_page('4798')  )  {
		remove_action( 'genesis_header', 'genesis_do_header' );
		add_action( 'genesis_header', 'cgp_special_header' );
		}
	
	function cgp_special_header() {
	//WP Meet Up Header Right
		genesis_markup( array(
		'html5'   => '<div %s>',
		'xhtml'   => '<div id="title-area">',
		'context' => 'title-area',
		) );
		do_action( 'genesis_site_title' );
		do_action( 'genesis_site_description' );
		echo '</div>';
		genesis_markup( array(
		'html5'   => '<aside %s>',
		'xhtml'   => '<div class="widget-area header-widget-area">',
		'context' => 'header-widget-area',
		) );
		
		do_action( 'genesis_header_right' );
		add_filter( 'wp_nav_menu_args', 'genesis_header_menu_args' );
		add_filter( 'wp_nav_menu', 'genesis_header_menu_wrap' );
		dynamic_sidebar( 'wp-meet-up-header' );
		remove_filter( 'wp_nav_menu_args', 'genesis_header_menu_args' );
		remove_filter( 'wp_nav_menu', 'genesis_header_menu_wrap' );
		
		genesis_markup( array(
		'html5' => '</aside>',
		'xhtml' => '</div>',
		) );
		}
}
add_action('get_header', 'cgp_add_second_header_right');

/** Register Widget Area */  

genesis_register_sidebar( array( 
    'id'                => 'banners-1', 
    'name'            => __( 'Email Subscribe Posts', 'mp' ), 
    'description'    => __( 'Visible on single posts before comments', 'mp' ), 
) ); 

genesis_register_sidebar( array( 
    'id'                => 'banners-4', 
    'name'            => __( 'HomePage Widget - Featured Stories', 'mp' ), 
    'description'    => __( 'Only visible on front page.', 'mp' ), 
) ); 

genesis_register_sidebar( array( 
    'id'                => 'banners-2', 
    'name'            => __( 'HomePage Widget', 'mp' ), 
    'description'    => __( 'Only visible on front page.', 'mp' ), 
) ); 

genesis_register_sidebar( array( 
    'id'                => 'banners-3', 
    'name'            => __( 'Email Subscribe Pages', 'mp' ), 
    'description'    => __( 'Visible on single pages at bottom', 'mp' ), 
) ); 

/** Add Widget Area */ 

add_action( 'genesis_before_comments', 'banner_widget_one' );  
function banner_widget_one() { 

if ( is_single() ) {
 
    genesis_widget_area( 'banners-1', array(
            'before' => '<div class="widget-area subscribe">',
            'after'     => '</div>',
        ) ); 

    }

}

add_action( 'genesis_after_entry', 'banner_widget_four' );  

function banner_widget_four() { 

if ( ( is_page(array('1109')) ) ) {

    

    genesis_widget_area( 'banners-4', array(

            'before' => '<div class="widget-area homepage">',

            'after'     => '</div>',

        ) ); 

    }

} 

add_action( 'genesis_after_entry', 'banner_widget_two' );  

function banner_widget_two() { 

if ( ( is_page(array('1109')) ) ) {

    

    genesis_widget_area( 'banners-2', array(

            'before' => '<div class="widget-area homepage">',

            'after'     => '</div>',

        ) ); 

    }

} 

add_action( 'genesis_after_entry', 'banner_widget_three' );  

function banner_widget_three() { 

if ( is_page() ) {

    

    genesis_widget_area( 'banners-3', array(

            'before' => '<div class="widget-area subscribe">',

            'after'     => '</div>',

        ) ); 

    }

} 

//* Create a custom Gravatar

add_filter( 'avatar_defaults', 'sp_custom_gravatar' );

function sp_custom_gravatar ($avatar) {

$custom_avatar = get_stylesheet_directory_uri() . '/images/custom-gravatar.jpg';

$avatar[$custom_avatar] = "Custom Gravatar";

return $avatar;

} 

//* Reposition the breadcrumbs

remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

add_action( 'genesis_entry_header', 'genesis_do_breadcrumbs' ); 

//* Defines Clickable Logo and adds Blog Info to title

function special_site_logo() {?><a id="sitelogo" href="<?php bloginfo( 'url' ); ?>"><img src="http://localhost/smallbizgeeklocal/wp-content/uploads/2014/images/logo.svg" width="145" alt="<?php bloginfo('name')?>" title="<?php bloginfo('name')?>" /></a><?php ;

}

add_action( 'genesis_site_title','special_site_logo',5,1);

//* Defines Clickable Logo and adds Blog Info to title

function wp_site_logo() { 

	//* Show if WP meetup page	
		if ( is_page('4798') ) {
	echo '<a id="sitelogo1" href=""><img src="http://localhost/smallbizgeeklocal/wp-content/uploads/2014/images/wp-logo.svg" style="margin:0 18px 0px 18px; height:134px;" width="100" height="170" alt="WordPress map pin" title="WordPress Meetup in Derby & Nottingham" /></a>';}

		}
		
add_action( 'genesis_site_title','wp_site_logo',5,1);

//* Add Social Buttons sharing shortcode

function get_sharing() {
	return '
<div class="fbshare">
<div class="fb-share-button" data-type="button_count"></div>
</div>

<div class="googleplusshare">
<div class="g-plusone" data-annotation="bubble" data-width="120"></div>
</div>

<div class="linkedinshare">
<script type="IN/Share" data-counter="right"></script>
</div>

<div class="twittershare">
    <a href="https://twitter.com/share" class="twitter-share-button" data-via="SmallBizGeekUK">Tweet</a>
</div>';
}
 
 
add_shortcode('sharing', 'get_sharing');

//* Add content seperator div shortcode

function get_seperator() {
	return '<div class="border-line"> </div>';
}
 
 
add_shortcode('seperator', 'get_seperator');

//* Modify the speak your mind title in comments

add_filter( 'comment_form_defaults', 'sp_comment_form_defaults' );

function sp_comment_form_defaults( $defaults ) {

 

	$defaults['title_reply'] = __( 'Add Your Thoughts' );

	return $defaults;

}

//* Modify the text before comments section

add_filter( 'comment_form_defaults', 'cd_pre_comment_text' );

/**

* Change the text output that appears before the comment form

* Note: Logged in user will not see this text.

*

* @author Carrie Dils <http://www.carriedils.com>

* @uses comment_notes_before <http://codex.wordpress.org/Function_Reference/comment_form>

*

*/

function cd_pre_comment_text( $arg ) {

$arg['comment_notes_before'] = "Your email address is safe and will NOT be shared with anyone else. <br><br>Hateful, spammy or abusive comments will not be tolerated. <br><br>For more information please see the <a href='http://www.smallbizgeek.co.uk/darren/comment-policy/' target='_blank' >comment policy</a>.<br><br>";

return $arg;

} 

I've submitted this thread to StudioPress support.

[ilkweb]

I've solved this issue. I transplanted the code I identified in functions.php from the latest version of Magazine into my "old" version of function.php.

Also, I copied the mobile responsive CSS from the smartphone viewport and put that in my own stylesheet.

Works well.

[Author]

Posts