by ShopSite Lauren » Thu May 28, 2015 1:06 pm
Fred, it looks like it is an issue with both the browser and ShopSite's code, so it will need to be logged as a bug and updated in the template.
In the meantime, the issue is being caused because the navigation menu javascript updates the navigation display when the window resizes. Along with the window resizing, the navigation menu gets reset so that if the navigation menu was closed in a narrow view, then the view widened (such as rotating the phone or tablet to be in landscape mode), and if the navigation is narrow enough to display as a desktop instead of with the hamburger icon, then the menu that was closed in the narrow view needs to be unclosed (not necessarily opened, because the default is to be displayed in desktop view) when the device was rotated. I hope that long description made sense. In short, every time the browser width changes, ShopSite's menu code rechecks the menu by first resetting the menu, then changing the menu display if the width required a different menu display. The issue is the the chrome browser is rendering a browser width change when you open the menu. I don't know why this is, I just know that the code to indicate that the browser width has changed, is activated when the menu is opened and you go to scroll in a mobile device.
The work-a-round:
To get around this, you can leave the ShopSite code to detect the browser width changing, and you can leave the code to change the menu style when necessary, but you would remove the code that 'resets' that main menu each time the browser width 'resizes'.
- Go to Merchandising > Custom Templates > Includes > Copy Publish File, and make a copy of the bb.js include file. Then copy your copy and rename it the exact same name as the original so that it overrides the original.
- In the bb.js publish file, find the line that looks like the following:
function verticalNav() {menuReset(); $("div.suckertreemenu ul#ShopSite").hide().parent().attr("id","verticalNav"); $(".bb-navfolder").children("a").click(function() {$(this).parent().children("ul").toggle(); return false;}); $("#bb-fade").click(function() {openVertical();});}
- Remove the .hide() so that the code looks like:
function verticalNav() {menuReset(); $("div.suckertreemenu ul#ShopSite").parent().attr("id","verticalNav"); $(".bb-navfolder").children("a").click(function() {$(this).parent().children("ul").toggle(); return false;}); $("#bb-fade").click(function() {openVertical();});}
- Save changes, then republish/regenerate your store.
- ShopSite Lauren
Contact me for help with any of your
custom ShopSite template questions.