Winchester Responsive

[RixStix]

TNX for all the pointers on where to make edits. Things are looking much better.

Its weird because the layout problems you have are with the responsive_default.css and not the tablet layout. Your user agent is not being detected. I rearranged elements in the header on this width in the responsive_default.css. Take a look at the demo:

http://www.zenlyzen.com/responsive-z...ter_responsive

Try this on any touch device ( I have only tried on Android 8" GalaxyTab 3 and desktop 25"/mouse with similar results)

Tap Categories down-arrow
Swipe/Scroll down the list so that you can select one of the lower, off-screen categories

As soon as your finger leaves the screen when you get the lower categories within view, the menu disappears making it impossible to select any category that is not within view on the initial dropdown.

Ditto if subcategory list is longer than the screen is tall.

[picaflor-azul]

TNX for all the pointers on where to make edits. Things are looking much better.



Try this on any touch device ( I have only tried on Android 8" GalaxyTab 3 and desktop 25"/mouse with similar results)

Tap Categories down-arrow
Swipe/Scroll down the list so that you can select one of the lower, off-screen categories

As soon as your finger leaves the screen when you get the lower categories within view, the menu disappears making it impossible to select any category that is not within view on the initial dropdown.

Ditto if subcategory list is longer than the screen is tall.

Take a look at the jquery demo here and let me know if it has the same behaviour:

http://adnantopal.github.io/slimmenu/#


Thanks,

Anne

[RixStix]

Take a look at the jquery demo here and let me know if it has the same behaviour:

http://adnantopal.github.io/slimmenu/#


Thanks,

Anne

The example there doesn't have a list as long as a zencart demo using the default data.

I can swipe/scroll the screen in the github example using touch without the menu collapsing.

So, no, the menu does not appear to collapse when a finger is lifted as it does in the Winchester demo

[picaflor-azul]

The example there doesn't have a list as long as a zencart demo using the default data.

I can swipe/scroll the screen in the github example using touch without the menu collapsing.

So, no, the menu does not appear to collapse when a finger is lifted as it does in the Winchester demo

Ok, thank you for the info ;) It will help me to trouble shoot.

Thanks,

Anne

[RixStix]

If there is anything that I can do to help, please let me know.

It is the weekend and even software folks deserve a break.

[RixStix]

Top Specials Bar. Is this by design or a glitch? Our initial thought was to use this bar to highlight a link to an EZ page that would explain new features or functionality in an attempt to help customers get acquainted with a new look. Then, migrate to SPECIALS.

Quitting time today, so will pick up here tomorrow.

/*bof top specials*/ 
define('HEADER_TITLE_SPECIALS','<a href="index.php?main_page=specials">Specials</a>'); 
define('HEADER_TITLE_TOP_TEXT','FREE Shipping on all orders over $50.00!');

The HEADER_TITLE_SPECIALS link only appears on desktop displays and is removed when width steps down from full width or possibly tablets. GalaxyTab 8 and 10 inch. Both are 1280 x 800. 10inch displays both 'defines' in landscape. 8 inch only displays HEADER_TITLE_TOP_TEXT in landscape. Do not have any means to test Apple devices.

The HEADER_TITLE_TOP_TEXT is displayed on all tablet devices that I can test but has no clickable link due to the above.

[picaflor-azul]

Top Specials Bar. Is this by design or a glitch? Our initial thought was to use this bar to highlight a link to an EZ page that would explain new features or functionality in an attempt to help customers get acquainted with a new look. Then, migrate to SPECIALS.

Quitting time today, so will pick up here tomorrow.

/*bof top specials*/ 
define('HEADER_TITLE_SPECIALS','<a href="index.php?main_page=specials">Specials</a>'); 
define('HEADER_TITLE_TOP_TEXT','FREE Shipping on all orders over $50.00!');

The HEADER_TITLE_SPECIALS link only appears on desktop displays and is removed when width steps down from full width or possibly tablets. GalaxyTab 8 and 10 inch. Both are 1280 x 800. 10inch displays both 'defines' in landscape. 8 inch only displays HEADER_TITLE_TOP_TEXT in landscape. Do not have any means to test Apple devices.

The HEADER_TITLE_TOP_TEXT is displayed on all tablet devices that I can test but has no clickable link due to the above.

You can put any content in the top bar. You can add your content by editing the define statements. If you want the text to link somewhere, then just add a html link tag ;) It is designed that the specials button will be hidden on mobile devices. This is for space sake.

Thanks,

Anne