Setting Responsive Break Point

Questions and answers about ShopSite Custom Templates

Setting Responsive Break Point

Postby gerryleblanc » Tue Jun 07, 2016 9:06 am

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
gerryleblanc
 
Posts: 37
Joined: Fri Apr 23, 2010 10:47 am
Location: Massachusetts, USA

Re: Setting Responsive Break Point

Postby ShopSite Lauren » Sat Aug 06, 2016 6:09 pm

Gerry, if you are still having trouble with this, could you provide your store URL so I can see what theme you are using?
- ShopSite Lauren
Contact me for help with any of your
custom ShopSite template questions.
ShopSite Lauren
 
Posts: 887
Joined: Fri Aug 11, 2006 1:35 pm
Location: Orem, UT

Re: Setting Responsive Break Point

Postby gerryleblanc » Sun Aug 07, 2016 3:12 pm

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
gerryleblanc
 
Posts: 37
Joined: Fri Apr 23, 2010 10:47 am
Location: Massachusetts, USA

Re: Setting Responsive Break Point

Postby ShopSite Lauren » Wed Aug 10, 2016 10:35 am

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.
- ShopSite Lauren
Contact me for help with any of your
custom ShopSite template questions.
ShopSite Lauren
 
Posts: 887
Joined: Fri Aug 11, 2006 1:35 pm
Location: Orem, UT

Re: Setting Responsive Break Point

Postby gerryleblanc » Wed Aug 10, 2016 10:48 am

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?
gerryleblanc
 
Posts: 37
Joined: Fri Apr 23, 2010 10:47 am
Location: Massachusetts, USA

Re: Setting Responsive Break Point

Postby ShopSite Lauren » Wed Aug 10, 2016 11:48 am

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>
- ShopSite Lauren
Contact me for help with any of your
custom ShopSite template questions.
ShopSite Lauren
 
Posts: 887
Joined: Fri Aug 11, 2006 1:35 pm
Location: Orem, UT


Return to Custom Template Questions

Who is online

Users browsing this forum: No registered users and 23 guests