Support » Themes and Templates » [Theme: Storefront] Mobile menu not working

  • Resolved roddirks

    (@roddirks)


    Hello. I created a very basic child theme to use with Storefront, and now I cannot get the mobile menu to expand. I have searched online for answers, and cannot figure this out! Anyone that can help? Thanks!

Viewing 10 replies - 1 through 10 (of 10 total)
  • This is my footer.php

    <?php
    /**
     * The template for displaying the footer.
     *
     * Contains the closing of the #content div and all content after
     *
     * @package storefront
     */
    ?>
    
    		</div><!-- .col-full -->
    	</div><!-- #content -->
    
    	<footer id="colophon" class="site-footer" role="contentinfo">
    		<div class="col-full">
    
            <p8>&copy; 2015 &nbsp;</p8>
            <a style="color:#e9e7e7" href="http://essencecoffeeroasters.com">Essence Coffee Roasters</a>
            <span class="footer-span">|</span>
            <p8>Phone: 605.350.6881</p8>
             <span class="footer-span">|</span>
             <p8>20388 419th Ave Iroquois, SD 57353</p8>
    
    		</div><!-- .col-full -->
    	</footer><!-- #colophon -->
    
    </div><!-- #page -->
    
    </body>
    </html>

    This is my functions.php

    <?php
    	add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    	function theme_enqueue_styles() {
    			wp_enqueue_style( 'parent-stlye', get_stylesheet_uri() . '/style.css' );
    	}

    This is header.php

    <?php
    /**
     * The header for our theme.
     *
     * Displays all of the <head> section and everything up till <div id="content">
     *
     * @package storefront
     */
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?> <?php storefront_html_tag_schema(); ?>>
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    
    <?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?>>
    <div id="page" class="hfeed site">
    	<?php
    	do_action( 'storefront_before_header' ); ?>
    
    	<header id="masthead" class="site-header" role="banner" <?php if ( get_header_image() != '' ) { echo 'style="background-image: url(' . esc_url( get_header_image() ) . ');"'; } ?> style="padding-top: 8px; padding-bottom: 0px; padding-left: 0px; border-left-width: 0px;">
    		<div class="col-full">
    
    <!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg  style="margin-left: 25%; margin-right: -25%; width: 50%; height: auto; padding-top: 8px; " version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 630 50" style="enable-background:new 0 0 630 50;" xml:space="preserve">
    <style type="text/css">
    	.st0{fill:#E9E7E7;stroke:#E9E7E7;stroke-miterlimit:10;}
    </style>
    </svg>
    <?php
    			/**
    			 * @hooked storefront_skip_links - 0
    			 * @hooked storefront_social_icons - 10
    			 * @hooked storefront_secondary_navigation - 30
    			 * @hooked storefront_product_search - 40
    			 * @hooked storefront_primary_navigation - 50
    			 * @hooked storefront_header_cart - 60
    			 */
    			do_action( 'storefront_header' ); ?>
    
    		</div>
    	</header><!-- #masthead -->
    
    	<?php
    	/**
    	 * @hooked storefront_header_widget_region - 10
    	 */
    	do_action( 'storefront_before_content' ); ?>
    
    	<div id="content" class="site-content" tabindex="-1">
    		<div class="col-full">
    
    		<?php
    		/**
    		 * @hooked woocommerce_breadcrumb - 10
    		 */
    		do_action( 'storefront_content_top' ); ?>

    And style.css

    /*
    	Theme Name: 	storefront child
    	Theme URI: 		http://essencecoffeeroasters.com/storefront/
    	Description: 	storefront child theme
    	Author: 		Rod Dirks
    	Author URI: 	http://essencecoffeeroasters.com
    	Template: 		storefront
    	Version: 		1.0.0
    	License: 		GNU General Public Lecense v2 or later
    	License URI: 	http://www.gnu.org/licenses/gpl-2.0.html
    	Tags: 			light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
    	Text Domain: 	storefront-child
    */
    
    @import url("/storefront/style.css");
    
    /* =Theme customization starts here. Coded by a rookie. :)
    */
    
    /* Random markups for site footer */ 
    
    .site-footer {
    	position:fixed;
    	bottom: 0;
    	width: 100%;
    	text-align: center;
    }
    
    .p8 {
    	color:#E9E7E7;
    }
    
    .footer-link {
    	color:#E9E7E7;
    }
    
    .footer-span {
    	margin-left:1em;
    	margin-right:1em;
    	color:#E9E7E7;
    }
    
    /* Remove lines from Page content*/
    
    .hentry {
    	border-bottom: none;
    }
    
    .hentry .entry-header h1 {
    	border-bottom: none;
    }

    bump

    I’m having the exact same problem.
    When I look at your site now, it seems to be fixed.

    How did you fix this?

    <?php function your_function() { echo '<p>This is inserted at the bottom</p>'; } add_action( 'wp_footer', 'your_function' ); ?>

    Paste that into your footer.php right before the /body tag. If that doesnt fix it send a link to your site.

    Don’t forget as well (for anyone else who’s found this thread via search) that Storefront needs “something” set for the Handheld Menu 🙂

    One of the main reasons I’ve seen folks mobile menu not appearing in Storefront is simply because they think it’s the same one that appears in the site. Unfortunately, Storefront needs it’s own mobile version of a menu to display. And it’s gotta be set within Settings > Menu

    If you’ve got your site open, copy and paste the end of THIS url onto the main domain of your site and it’ll take you to exactly the right spot:
    /wp-admin/nav-menus.php?action=locations

    Hello – Same Issue – I have searched everywhere for an answer. My handheld menu is not displaying any menu at the top area. http://www.weldables.com
    Yes, I have setup and activated all three menus. Primary – Secondary and Handheld
    I have Storefront, ProShop and Powerpack

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘[Theme: Storefront] Mobile menu not working’ is closed to new replies.