Error in navigation on first screen load - mobile

[FredW]

Hi Folks

We are using ShopSite® Pro 14.0 sp2, Editorial theme.

On iPhones, when the screen is first loaded the navigation is a drop down not the pancake bars as it show on ever screen after the first. If the user clicks on the navigation the drop down overlays the main dropdown and is very hard to use. You can see the screen image at: https://keithspecialty.com/nav-error.PNG

Is there anything that can be done to get the pancake nav to load on that first screen?

My customer thinks it is causing them to loose orders.

Any help will be appreciated.

Fred

[ShopSite Lauren]

Looks like the navigation function isn't running correctly (or maybe it is a timing issue), but you should be able to fix this by just specifying to run the function after the page loads. Here are the steps to do this:

1. Go to Merchandising > Custom Templates > Includes Files > Copy ShopSite Publish File. Make a copy of the "element.js" publish file. Name it whatever.
2. Make a copy of your copy. You are going to be re-copying the file you just copied, but this time name it exactly, "element.js" so that it overrides the original. You can delete your other copy that does not have the exact same name as the original.
3. Look for the code shown below (it is about 2/3rds the way down), and add "checkNavWidth();" following it.
This:

Code: Select all

#
#               onload for   ALL PAGE TYPES ###############################################
#
[-- IF PageMenu --]  ss_jQuery(".suckertreemenu li").hover(flyoutHover,flyoutHover);
  ss_jQuery(".suckertreemenu li").click(flyoutClick);
  ss_jQuery(".suckertreemenu li>a").click(function(ae){if (ss_jQuery(this).siblings("ul").length && ss_jQuery("body").hasClass("mobile")) {ae.preventDefault();}});
[-- END_IF --]

Becomes this:

Code: Select all

#
#               onload for   ALL PAGE TYPES ###############################################
#
[-- IF PageMenu --]  ss_jQuery(".suckertreemenu li").hover(flyoutHover,flyoutHover);
  ss_jQuery(".suckertreemenu li").click(flyoutClick);
  ss_jQuery(".suckertreemenu li>a").click(function(ae){if (ss_jQuery(this).siblings("ul").length && ss_jQuery("body").hasClass("mobile")) {ae.preventDefault();}});
[-- END_IF --]
checkNavWidth();

4. Last. Save changes and publish. Note, mobile devices cache files for longer and external CSS and JS files are not refreshed when you refresh the page, so you will want to open an incognito/private window on your mobile device to see the page with your updated javascript file.