Mobile Navigation Menu Not Showing

[Larry James]

I am using the Lifestyle Pro theme with the latest version of WordPress. When viewing the site on mobile the standard navigation menu appears, not the mobile hamburger menu.

I have tried disabling all of my plugins and have even tried to remove all the customization's I have done, but I still only see the standard mobile menu. I would appreciate some help with getting the mobile menu to appear on all mobile devices.

Thank you

http://greengirloutdoor.ca/

[Sandee]

Hi, Larry.

I'm not seeing the CSS for the responsive menu in your stylesheet. I see your media queries at the bottom, but not the CSS for the hamburger menu. You might have deleted the code when you went through to make your customizations. If you add that code back, the hamburger menu should show on mobile.

Sandee

[Larry James]

Thanks for your help Sandee. I have another site running the Lifestyle theme. I found this code missing

/* Responsive Menu
--------------------------------------------- */

.responsive-menu-icon {
	cursor: pointer;
	display: none;
	text-align: center;
}

.responsive-menu-icon::before {
	content: "\f333";
	display: inline-block;
	font: normal 20px/1 'dashicons';
	margin: 0 auto;
	padding: 10px;
}

.site-header .responsive-menu-icon::before {
	padding: 0;
}

I have added it into the style.css stylesheet but the responsive menu is still not showing.

Even when I copied and pasted the complete style sheet from http://vacuumplus.ca/ the responsive menu does not work.

[Larry James]

I have just noticed that I am using v 3.0.0 and the other site uses v 3.1.
For some reason in the Genesis settings I have it checked to "Enable Automatic Updates" but it has not updated. I will try to update manually.

[Larry James]

Problem solved! Upgrading to Lifestyle Pro 3.1 solved my issue. Now I just have to put back my customization's.

[Sandee]

Awesome! So glad this worked out for you.

My other suggestion regarding making customizations is to always put your custom styling ABOVE media queries. Things sometimes get a little wonky when you put custom styles below the media queries.

Here's a link to a helpful post by Genesis theme developer, Web Savvy Marketing, on theme customizations --

https://www.web-savvy-marketing.com/2013/06/best-practices-genesis-theme-customization/

Cheers!
Sandee

[Lars]

Had the same problem with the missing hamburger icon at the mobile menu.

But instead of updating the Lifestyle-Pro Theme i just overwrite the responsive-menu.js - And it worked.

[Lars]

And adding the following line wp_enqueue_style( 'dashicons' ); to your functions.php should help:

//* Enqueue Scripts
add_action( 'wp_enqueue_scripts', 'lifestyle_load_scripts' );
function lifestyle_load_scripts() {
	
	wp_enqueue_script( 'lifestyle-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
	
        wp_enqueue_style( 'dashicons' );
	
	wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Droid+Sans:400,700|Roboto+Slab:400,300,700', array(), CHILD_THEME_VERSION );
	
}

[marthas]

I'm having the same problem but, like you, don't want to update my child theme as I have too many customizations. I didn't have a responsive-menu.js file in my 3.0.0 version, but downloaded the 3.1.1 child theme and then copied only this file to my js folder. I'm assuming this won't cause any problems - is there a 3.0.0 js menu/nav file that I should delete?

I also made your change above to my functions.php. I'm assuming that I also need to copy the responsive-menu css from the 3.1.1 css file and add it to my existing styles.css at the bottom?

Thanks in advance for any help! Haven't done too much of this level of WP work before...

-Martha

[jimbo5]

Hi, I´m having the same problem. I can´t see the hamburguer / accordion menu in the mobile version. The web is http://eloyhanoi.com/ and my custom css code is:

/*
Theme Name: Lifestyle Pro Theme child del child
Theme URI: http://my.studiopress.com/themes/lifestyle/
Description: A mobile responsive and HTML5 theme built for the Genesis Framework.
Author: StudioPress
Author URI: http://www.studiopress.com/
Version: 3.0.0

Tags: green, tan, white, one-column, two-columns, three-columns, fixed-width, custom-menu, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready

Template: genesis
Template Version: 2.0.0

License: GPL-2.0+
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

@import url(https://fonts.googleapis.com/css?family=Chicle);

.caja-viajes {
margin:0 0 25px;
overflow:hidden;
padding:20px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.caja-viajes {
background-color:#fef5c4;
border:1px solid #fadf98;
}

.site-header {
background-color: #ffffff;
padding: 0px;
padding: 0rem;
overflow: hidden;
}

.genesis-nav-menu a {
color: #555555;
}

.genesis-nav-menu {
font-size: 23px;
line-height: 30px;
font-family: "chicle";
}

.nav-secondary {
background-color: #ffffff;
}

.genesis-nav-menu > li:hover a, .genesis-nav-menu a:hover, .genesis-nav-menu .current-menu-item > a {
color #BA661E;
}

.lifestyle-pro-home .content .widget-title {
background-color: #BA661E;
border-radius: 3px;
}

.site-footer {
background-color: #ffffff;
}

.site-footer {
color: #555555;
}

.entry-title a:hover {
color: #BA661E;
}

a {
color: #BA661E;
}

button, input[type="button"], input[type="reset"], input[type="submit"], .button, .entry-content .button {
background-color: #BA661E;
color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "chicle";
}

[Author]

Posts