• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Mobile Navigation Menu Not Showing

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Mobile Navigation Menu Not Showing

This topic is: not resolved

Tagged: mobile menu

  • This topic has 9 replies, 5 voices, and was last updated 9 years ago by jimbo5.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 9, 2016 at 9:16 pm #176098
    Larry James
    Member

    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/
    January 9, 2016 at 10:17 pm #176100
    Sandee
    Participant

    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

    January 10, 2016 at 11:40 am #176154
    Larry James
    Member

    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.

    January 10, 2016 at 12:10 pm #176155
    Larry James
    Member

    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.

    January 10, 2016 at 12:26 pm #176157
    Larry James
    Member

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

    January 10, 2016 at 12:33 pm #176158
    Sandee
    Participant

    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

    March 11, 2016 at 4:09 am #181194
    Lars
    Member

    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.

    March 11, 2016 at 4:38 am #181196
    Lars
    Member

    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 );
    	
    }
    April 20, 2016 at 6:01 pm #184027
    marthas
    Member

    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

    May 23, 2016 at 7:10 am #186128
    jimbo5
    Participant

    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
Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble