Actual navigation not what theme says it should be

[FredW]

Hi Folks,

I have been testing some of the new themes (responsive design) and found the actual navigation I get (on desktops) is not what the theme says it should be.

Specifically, I have tried the Familiar theme and it looks like the navigation should be across the top (for desktops) and I'm getting at mobile type theme compressed in a pop-down menu.

You can see a snapshot of what I expect here: http://keithdemo.keithspecialty.com/media/ss-familar-theme-viewed.JPG

What I actual got is found here: http://keithdemo.keithspecialty.com/media/ss-familar-theme-actual.JPG

I can accept this navigation for mobile devices, but I get it for Chrome, FireFox, and IE on my desktop, on my iPad using safari and chrome, and on my Samgsun android phone and my wife's iphone.

Also, the navigation does not always work correctly on my samgsun SIII phone. Sometimes it hangs and does not show the popdown choices, other time is shows the choices but they are below the screen and when I go to scroll up, the menu disappears, and sometimes it gives a message saying site is not responsive, close or wait. Of course waiting does nothing.

Did I miss something in my setup or are there differences between what the backoffice shows the themes to be and the actual results?

Thanks in advance,
Fred W

[Jim]

How wide is your browser window? How big is your navigation menu?
I have found that if the navigation can't all fit within the width of the browser window that it will switch to the 3 bar type menu. I haven't tried it in that particular theme but I'll look at it tomorrow at work and see what happens.

[FredW]

Hi Jim,

I have tested this on multiple desktops, both Windows7, ME, Windows8, xp, iMac with various browser with various screen widths (1920 x 1080 is the largest) , and I still get the 3 bar menu.

However, your reply got me thinking about the width of the menu bar. If the customer registration feature is turned on (which I had), with the Familiar theme, it puts the Sign in and Register options on the menu bar and that, alone with my menu settings, must not fit into the 1000 PX default page width. I tried to set the page width wider to accommodate my menu options and the customer registration options, but could not get it to generate wider pages. I tried 1200 px, 1500px and 100% and none of those seam to make the page wider. If I removed disabled the customer registration option and/or some my menu options, then I got the page to generate the menu bar for wide desktop browsers. If I squeezed the browser window down, it went back to the 3 bar menu which is what one would expect.

If the theme is a responsive design, why is the default page width set to 1000 px? I would think a setting of 100% would be more appropriate?

If you need any additional information or access to the ShopSite back office, let me know privately and I'll give you access.

Thanks for the speedy

[ShopSite Lauren]

The page width setting is for the max width of the page. So if your browser window is larger than 1000px wide, your site will still only be the max width for the site, which is set to 1000px in your store.

With the navigation menu, the mobile menu icon appears when the navigation is too big to fit in the area provided. Some themes display the navigation menu on it's own line, and some themes include other elements on the same line as the navigation, such as the registration links or search field. If your navigation menu is showing the mobile style navigation icon when the site is at full width, it means your navigation menu is too long/wide. To fix this you could eliminate some links in the navigation menu, switch themes to one that only has the navigation links on the navigation menu line, or change the max width of your site to be larger.

[FredW]

The page width setting is for the max width of the page. So if your browser window is larger than 1000px wide, your site will still only be the max width for the site, which is set to 1000px in your store.

With the navigation menu, the mobile menu icon appears when the navigation is too big to fit in the area provided. Some themes display the navigation menu on it's own line, and some themes include other elements on the same line as the navigation, such as the registration links or search field. If your navigation menu is showing the mobile style navigation icon when the site is at full width, it means your navigation menu is too long/wide. To fix this you could eliminate some links in the navigation menu, switch themes to one that only has the navigation links on the navigation menu line, or change the max width of your site to be larger.

Lauren, thanks for the great explanation. It fits my testing observations with one exception. I changed the page width on some of the pages and even the default page width (and created a new page) and it did not make a difference. I tried 1200 px, 1600px, and 100%. It looked like something else is restricting the max width of that page to 1000px.

Did I miss something?

You can see it at http://keithdemo.keithspecialty.com/fw-test-width.html

Fred

[Jim]

The publish css file for this theme, bb-familiar.css has several places where the max width is set to 1000px for example
div#fr-header {padding: 0px; text-align: left; position: relative; z-index: 4; width: 94%; max-width: 1000px; margin: 0px auto;}
and
div#bb-content {width: 94%; max-width: 1000px;}
and
div#bb-carousel, div#bb-pagebannercar {width: 94%; max-width: 1000px; margin: 0px auto; background: #FFFFFF;}

There may be others also so check the rest of the file and see if there are more.

Try changing those and see if it makes a difference.

[ShopSite Lauren]

Fred, the new themes only support the global page width setting, not page-specific page width settings, so you will need to change the width under Preferences > Layout Settings.

[FredW]

Fred, the new themes only support the global page width setting, not page-specific page width settings, so you will need to change the width under Preferences > Layout Settings.

Thanks Lauren, I thought I already tried that, but will have to do it again to confirm I got it right. I'll try it later tonight and let you know.

Great help!