Responsive design resize issue

[FredW]

Hi Folks,

Today, we noticed a new behavior on our website for some browsers (Chrome and Firefox) and can not find out what causes it. In the past when we resized the browser window, the website would respond dynamically to the screen size. Making the browser window smaller would change the menu across the top to the common three bar lines icon, then making it larger the menu would expand to list the choices across the top again.

Today (and it may have happened earlier and nobody noticed), when the browser first opens, the menu bar is always the three bar icon, even if the browser menu is large enough to accommodate the full menu across the top. Resizing the browser window does not change the three bar icon. However, if one refreshes the browser window, (sometimes it takes more than one refresh - depending on the browser used), the menu is then displayed correctly. After that, any change is the browser screen size the menu responds correctly.

This behavior is seen all the time in Chrome (Version 48.0.2564.109 m) and in Firefox (version 44.0.1), but I will admit I can't always get Firefox to behave consistently. We use the familiar responsive design and the url is keithspecialty.com using ShopSite® Pro 12 sp1 r4.0.1. We also see it in our keithdemo.keithspecialty.com site using ShopSite Pro 12 sp2 r1.

Chrome appears to be the most consistent in behaving this way. Sometimes, I seen this in an Windows XP system) even refreshing the browser window in Chrome never fixes the three bar icon, even when the screen is large.

IE 11, Safari (5.1.7) and Edge work OK, dynamically responding to the screen size.

It is not a major issue, but we do have customers that use desktops only and do not recognize the three bar icon and know it is a menu drop down icon. If this is not a easily fix, is there an easy way one can change the three bar icon to a button that says "menu"?

Thanks in advance for your help. This is way beyond my ability diagnosis.
Fred

[ShopSite David]

I'm told by our designer that it is because the javascript calculating the width of the menu to determine if it needs to be minimized or not is completing before the Google font is being loaded. The Google font is more narrow than the default page font, so the width of the menu is too wide with the regular font, but not too wide with the Google font. That is why when you refresh, the Google font may be cached, so the font loads immediately, and the menu displays correctly. You can change your menu so it is just a tiny bit more narrow (such as changing “Monthly Sales” to just “Sales”), or making your page just a tiny bit wider (Preferences > Layout Settings).

[FredW]

Thanks David,

We will try your suggestions. However, it does not address why the behavior was find until just recently. Nor does it explain why we see this on Firefox.

Fred

[FredW]

David,

I changed the page size from 1000 px to 1200 px and it does appear to work fine on our production system (running ro 12 sp1 r4.0.1). However on our demo system running Pro 12 sp2 r1 it did not make any difference. Is there something release dependent?

Fred