Hello,
Since last update on yesterday that updates Storefront , the Hamburger menu doesn’t work on mobile or tablet.
The menu button appears bur does nothing when tap on it, what can do to fix?
Thanks in advance for your help
]]>The hamburger menu is not activating on mobile layout. Any idea how to troubleshoot it?
]]>Hello,
I’m trying to reduce the vertical space between menu items but can’t find which css I’ve to apply, can you help me please?
Many thanks
Robert
]]>Hi,
I know there’s no settings as such for the app, but is way to determine where the toggle kicks in?
Obviously I want it on mobile and tablet, but from 1025px
and up I’d just want to output the menu horizontally, like a typical desktop menu.
Can anyone help please?
Many thanks
T.
]]>Hi,
I’m new to this so would appreciate any help I can get.
After downloading the storefront hamburger menu plugin and activating it, is there any other configuration or setting needed? I tried searching online and there’s no guide, just told to download the plugin.
I have downloaded and activated, but the hamburger menu (or icon) only shows for a short second when I am loading my site, and it goes off after the site loads. And I’ve no idea what to do.
Regards,
Mill
Hello,
I m a it surprised that I m the first on to ask, but is there a workaround to make the text of link clickable in case of the sub menu ? right now, if the item has sub items, you need to click on the arrow to collapse it. If you click on the text, nothing happens.
This is very important because it is not obvious for some people to click on the arrow to see the sub menu.
Thanks
]]>Since the last update, the mobile menu on my website is not working. I tried it on the desktop preview option and it works, but on all mobile devices – it doesn’t and it is my only entry point to the shop.
]]>Hello,
is there any opportunity to move the mobile button to the handheld menu bar?
See: https://pasteboard.co/IXeUbIE.jpg
I tried to include few codecombinations into the following codesnippet:
https://docs.woocommerce.com/document/customize-the-links-in-the-handheld-footer-bar/
But unfortunately I couldn’t make it work.
Kindes regards
Abidin
The issue appears when you have a sub-menu that has a larger then the screen can take amount of items while in handheld mode, and when your root menu has only a few items that the mobile device can take without having to scroll.
By default the .handheld-navigation will have an overflow-y: scroll; which will make it possible for the user to scroll down by accident and hide the root menu prior to expanding the sub-menu that holds a lot of items. This happens because the size of the sub-menu is added to the parent element prior to expanding the sub-menu via the .dropdown-toggle.
My function takes care of that by listening for a mutation of the code, and by changing the css value of the .handheld-navigation overflow property only after the user clicks the .dropdown-toggle. Then changes again the overflow once the user toggles-off the dropdown.
You need to have the following css modification too placed in your style.css:
.storefront-hamburger-menu-active .main-navigation .handheld-navigation { overflow-y: hidden; }
Add this to your html code(I put it in my header)
<script type="text/javascript">
jQuery( document ).ready(function() {
var obs = new MutationObserver(function(mutations, observer) {
jQuery.each(mutations, function (i, mutation) {
var addedNodes = jQuery(mutation.addedNodes);
var selector = "button.dropdown-toggle" //listen for this target
var filteredEls = addedNodes.find(selector).addBack(selector); // finds either added alone or as tree
filteredEls.each(function () { // can use jQuery select to filter addedNodes
//do this
jQuery('.dropdown-toggle').click(function(){
if(jQuery(this).hasClass("toggled-on")){
jQuery('.handheld-navigation').css("overflow-y", "scroll");
}else{
jQuery('.handheld-navigation').css("overflow-y", "hidden");
}
});
//end action
});
});
});
var parentElement = jQuery(".handheld-navigation")[0]; //listen inside this target
obs.observe(parentElement, {childList: true, subtree: true});
});
</script>
Hope that helps someone and actually I hope to see it in a future version of the plugin!
]]>Hi,
can I add other button in the template that open sidebar menu?
thank you
Hi,
The storefront theme looks terrible on mobile. How can I make it look similar on all devices?
Kind regards,
Line
Hi!
Is there any way to add product categories to the menu?
I just can to add manually the main categories.
Thanks
]]>Is it possible to change/translate the “Close” text in Storefront Hamburger Menu plugin? How to do it?
Thanks!
How do I replace the word “Menu” with “Info” in the responsive menu?
]]>I have a fairly large menu and this plugin has issues that makes it unusable for us.
1. With the bottom toolbar enabled (account, search, basket) if you scroll down the menu the last menu items will always become cut off
2. If you do try to scroll the menu down suddenly the page loses menu focus and any scrolling done on the menu ends up scrolling the page behind the menu with no way to get the menu control working again
This really needs fixing
]]>When I use this plugin, It will display a black line box & hamburger & “Menu”
How do I hide the black line box & “Menu” word like screenshot of Storefront Hamburger Menu Plugin page
Thanks
]]>Is there a git project somewhere that I can submit a pull request to?
]]>Hi,
I’m just wondering if it’s possible to create headings with sub-categories that open and drop-down.
I’m using woocommerce with mega menus and better menus.
We have the effect we want on the desktop version of our site (https://imgur.com/i7ViuHl) but on mobile only the highest-level categories are shown. (https://imgur.com/a/pB6fm)
Clicking one of these brings you through to a page with all of the aforementioned subcategories, which is not ideal.
Is there a way to make it so that when you click one of these headings on mobile, it drops down to reveal the sub-headings we have on desktop?
Thanks for your time and let me know if you need clarification.
]]>hello,
I installed the hamburger menu plugin but it does not apply to my menubar. how can i fix this? my website is: https://pandoracatering.nl/
thanks in advance!
]]>Does this plugin also works with an Storefront Child-Theme ore really only with the Storefront Theme ?
]]>The menu is blank? What am i missing? Is there something I need to configure or do I need to name the mobile menu a specific name for it to work?
]]>The Hamburger menu is only working on the homepage as soon as I navigate to any other page on the site, my logo is exchanged for text and the menu changes to the main menu from the desktop rather than the handheld one?!
Anyone know what’s going on and how to fix this?
]]>hi, i am using Storefront theme with WooCommerce, i want to replace Cart Menu with Handheld menu on Mobile Screens, i am using Hamburger menu.
i have placed Menu Button inplace of Cart by Using this Code
if ( ! function_exists( 'storefront_handheld_footer_bar_cart_link' ) ) {
/**
* The cart callback function for the handheld footer bar
*
* @since 2.0.0
*/
function storefront_handheld_footer_bar_cart_link() {
?>
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_html_e( 'Primary Navigation', 'storefront' ); ?>">
<button class="menu-toggle" aria-controls="site-navigation" aria-expanded="false"><span><?php echo esc_attr( apply_filters( 'storefront_menu_toggle_text', __( 'Menu', 'storefront' ) ) ); ?></span></button>
<?php
wp_nav_menu(
array(
'theme_location' => 'handheld',
'container_class' => 'handheld-navigation',
)
);
?>
</nav>
<?php
}
}
but it is now just showing icons and not any text of menus i suppose this is because it is taking CSS from storefront-handheld-footer-bar , any help will be appreciated.
]]>Hi,
I have been using this plugin for a while and really enjoy it.
I took the latest upgrade recently and have a couple of issues:
1. The word “Navigation” now appears in the button. Is there a clean way to disable this?
2. The button now expands to the full length of the (handheld) screen, thus causing it to show up on a second row underneath my site logo. Is there a way to have it return to display “inline” (and right-justified) with the logo (and without the “Navigation” text also)?
Thanks, Morgan
]]>Hello,
The plugin works exactly as I expected without maybe the only one feature I’d like to have –
I have a really big menu with mass of sub-menus… 3 levels. Is it possible to collapse all submenus at the very start and open/close them by tapping… the icon near the main menu or something like that?
Thx
Hi,
First of: I love your plugin. It’s really what I was looking for!
I’ve this great idea but I’ve been able to get it to work properly – I need your help :).
Using the information from Customize links in the handheld footer bar is there any way to add a link that will open the hamburger menu?
Thanks in advance.
]]>How do I choose settings?
]]>Hello,
I am very new to WordPress, and I am trying out Woocommerce with Storefront and the Hamburger menu.
I want it to be displayed at a larger width because I moved the nav menu up and removed some of the heading border in the css of my child theme to make it thinner. This causes problems with resizing windows etc. My solution is to activate the responsive menu sooner so some of those issues arent a problem.
I found two mentions of @media … max-width 768px etc etc in style.css of the plugin and changed them around, found two in style.scss and one in storefront-hamburger-menu.php.
Despite changing all these the same e.g max-width 1000px and other things I tried the behaviour of the plugin doesnt change at all.
Help please!
]]>first Thanks for the great work , this plug in is awesome
here is my problem , https://i.imgur.com/zKeDJnv.png
i am using storefront and Galleria both latest version
Thank you
]]>Hello! How to make collapsing Storefront Hamburger Menu on mobile-clicking to right space beetween right border of menu-content ond right edge of mobile-display. It is very importat to add this feature! Thanks very much!
My site link in mobile version:
]]>