Setting Responsive Break Point

[gerryleblanc]

Hi Folks,

Does anyone know where to edit the responsive break-point for the mobile menu to kick in? I'm finding that it does not load in soon enough for the width of my built-in sucker-tree nav bar. It seems like it converts to the mobile menu around 560px width.

Thanks for any help!
Gerry

[ShopSite Lauren]

Gerry, if you are still having trouble with this, could you provide your store URL so I can see what theme you are using?

[gerryleblanc]

Hi Lauren!

I was working on this site here:

http://www.indigocoffee.com/cgi-indigocoffee/sb/order.cgi?storeid=*1cbd44f490a28ec7a072472a1db78aba&function=show

Shop site only comes into play in the shopping cart, and I had to build the navigation the best I could with the Shopsite system... but I wish I knew where the breakpoint was set for the mobile hamburger nav to kick in.

Thanks,
Gerry

[ShopSite Lauren]

The menu break point in the response theme is determined by the navigation menu width. The width for the main navigation links is determined, and if it is larger than the navigation allowed area, then the mobile style is displayed. If the navigation menu fits within the navigation area, then the regular menu is displayed.

[gerryleblanc]

Hi Lauren,

At the link:
http://www.indigocoffee.com/cgi-indigocoffee/sb/order.cgi?storeid=*1cbd44f490a28ec7a072472a1db78aba&function=show

The mobile nav icon only seems to kick in at about 560 pixel width of the browser. If you open the browser to 600 pixels, the standard navigation bar is visible and scrolls away to the right.

Where is that 560(ish) breakpoint set in the Responsive theme file structure?

[ShopSite Lauren]

It looks like your template files were modified from older versions of the ResponsiveDesign files. In older versions of the menu JS, the navigation didn't perform consistently because it didn't always account for navigation link padding (such as padding because of the additional arrows -- not displayed in your store, but the class and padding is still added -- that are typically displayed when there is a flyout menu) and one other glitch that I don't recall at the moment but I know it was tweaked. So if I save your cart page to my local computer, and add/switch the code listed below, it works correctly.

Add this code to the bottom, just before the </body> tag.

Code: Select all

<script type="text/javascript">
ss_jQuery("document").ready(function() {
  var menuwidth = ss_jQuery("ul#ShopSite").outerWidth();
  ss_jQuery(window).resize(debouncer(function() {menuChange(menuwidth);}));
  menuChange(menuwidth);
});
</script>

And switch your custom ResponsiveDesign-Indigo.js publish file with the default ResponsiveDesign.js publish file:

Code: Select all

<script type="text/javascript" src="http://www.indigocoffee.com/publish/ResponsiveDesign.js"></script>