top category menu in 3.30 responsive theme - there's a fundamental flaw

when we resize the window, the screen adjusts as we want it but the left hand category menu disappears and we are left only with the top menu.

the problem with this is if we choose not to include some / all categories in the top menu then there is no link to those categories at all on smaller devices.


perhaps a solution would be user settings to :

    'show top menu on smaller devices'
and
    'show left menu on smaller devices'

or, in the case of smaller devices, simply render the (full) left hand menu instead of the top menu





thoughts anyone ?

.

Thanks for suggestion. You're absolutely right. But this desktop top menu is actually also a "top" menu on mobile device. So it works fine.

Furthermore, it can also make the default implementation is a bit more complex (more code duplicates). Let's leave it for customization

I don't understand - out of the box, if a storeowner has chosen not to include thier categories in the top menu,


then it's not possible to navigate the store products on a smaller mobile device because no category menu is rendered ?

=====

I've set up a demo  here - http://nop.tstf.co.uk/

just left 1 category in the top menu

We have struck the same problem.
It took us quite some time to persuade our client to go for nopCommerce rather than proprietary solution, but now I am not sure we can adjust current version of nopCommerce to the client's rather modest needs.

They don't want anything extraordinary, just items like Home, About Us, Contact, etc in the top menu and product categories on the left. Honestly, if someone ever did an online shop, he will quickly come to conclusion that the categories/products have to be one under another because words are rather wider than taller. Horizontal menu is a poor candidate because we typically have many categories and need to drill down into subcategories and their subcategories.  The version of nopCommerce3.30 for download just masks this architectural problem by featuring unrealistically too few categories.

Currently nopCommerce has product categories in both menus. When we go mobile, the top menu becomes navigation through the categories and left menu disappears, at least we get this impression from the colors.
Googling did not bring any answer re how we replace the top menu with what typical website has there, and still keep the categories shopping on a mobile device.

There are 2 problems we now have to solve with nopCommerce or code a proprietary shop ourselves:
1. How to rid of the top menu categories (I guess generated from RDBMS) and replace them with menu that holds items and sub-items we need without all the hell breaking loose?
2. How to make the left-hand menu appear in mobile version?

I am sure we are not alone in experiencing this problem, unless the customer base of this product is negligible.

Nick

nop-templates does it perfectly - see below for an example - use a mobile device or instal a useragent for your browser

http://themes.artfactory.nop-templates.com/food


I really think this is too important to ignore.

Add this code to your responsive css file for the desired theme.

REMOVE this:

.master-wrapper-main .side-2  > *{display:none;}

And ADD this:

@media screen and (max-width:480px){
    /* MASTER PAGE WRAPPERS */
    .master-wrapper-main .side-2{
       float:none;
       width:100%;
    }
}

You can center your text and make it bigger, colour, background to match your theme but this will simply expand the categories to fit the mobile.

Is this sorted in V3.4? Thanks

no, the problem still exists


out of the box, It is simply not possible to navigate the product catalogue on a small mobile device


try looking here on a mobile phone http://nop.tstf.co.uk

anyone find a solution to this?

I tried the CSS hack on the responsive.css file, but it doesn't work, unfortunately

I figured out what was wrong with the hack - on 3.5 it was leftside-3 that needed changing

    /*.master-wrapper-main .leftside-3{display:none;}*/
    .master-wrapper-main .leftside-3{ float:none; width:100%;}

Works like a charm!