[Theme: Storefront] Mobile menu not working
-
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!
-
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>© 2015 </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; }
my website is http://essencecoffeeroasters.com
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
- The topic ‘[Theme: Storefront] Mobile menu not working’ is closed to new replies.