allowing mobile menu to expand/collapse

12/3 build of quark quick install ecommerce
site: www.ahgoobaby.com/Redesign3

Is it possible to get the mobile menu to expand / collapse for the menu items that have submenus? In particular I have a few different subcategories for my store and it looks very cluttered when in mobile mode to have all of them expanded at the same time. Ideally the customer could click STORE and then see 4 categories and click one of those categories to see the 3 categories under that. Right now it out of the box you have ALL categories expanded at all times and hoping there is a way to allow the customer to expand/collapse as needed.

I’m afraid that modifications such as this require extensive changes to the theme’s code; I do apologize but such large changes are custom work that are beyond the scope of our technical support.

Is there a way instead to only allow the first menu layer? That would allow less clutter in the mobile menu.

Hi

You can try different presentation of menu. In template settings You can select "Classic menu"

But is classic menu possible in mobile views?

Hi

By "classic" You mean a select dropdown menu ? If yes that it's only possible with a classic layout selected for template entirely.

Sorry, hit send by accident.

I mean heaving 2 different styles at the same time is possible, but problem is that this would require changes to template's code and we do not support such big customisations.

I'm not following you. My current question was with regard to the mobile menu. I have the classic menu set for desktop, but mobile menu was set for tablet and mobile phone. How do i get the classic menu to work for the mobile view. In the alternative, how do i set up a different menu to appear for tablet and mobile phone views? Essentially, the desktop classic view (current view shown) flows well because of the way the menus drop down and font sizing. But when those same menus carry over into the mobile menu (hamburger icon menu) on tablet and mobile views, it is cluttered as it all is listed together in a line. Yes, they tab in slightly but it is cluttered and confusing. There needs to be a way to simplify the choices in mobile menu view without limiting the choices in the desktop view. I'm not completely clear what you mean by "classic" or where / what to do to implement your recommendations. Please elaborate more so that I can understand.

Hi

I'll try to explain. There are 2 menu styles which came with template.

1. Off-canvas
2. Classic

What I understood from Your question is that You would like to use Classic for desktop and Off-canvas for mobile devices, but now I'm not sure if I understood correctly. I think You just meant to distinct submenus a little bit. Try to add this code to override.css:

Code: Select all

@media only screen and (max-width:1040px) {
#gk-menu-overlay-wrap .gkMainMenu .childcontent {
    padding: 0 0 0 30px !important;
}
}


I tried this and it has no effect. I'm not sure what you're screen shot / code is looking to change? My request was to see if it is possible to LIMIT the number of child menu levels to 2 - the top level menu item and one child level menu item for the MOBILE MENU only. My desktop menu (classic) has top level menu + 2 child levels (one level under main and an additional submenu under the initial child level). For example, one of my top view menu items is "OUR PRODUCTS"; upon mouseover you see sub menu 1 = Feed and submenu 1a-b = The Bib and The Burp Cloth. Essentially, on the MOBILE MENU only I would like to limit the levels to a maximum of 2, so when the MENU hamburger icon is clicked only OUR PRODUCTS / Feed is shown. This will get rid of a lot of clutter that is hard to navigate in the mobile menu. In the classic menu the extra level is useful, but in the mobile menu due to its compact nature the clutter outweighs the usefulness. So is this possible?

Hi

I think I understand now. Possible and pretty simple. All You need is this code:

Code: Select all

@media only screen and (max-width:1040px) {
#gk-menu-overlay-wrap .gkMainMenu .childcontent { display: none !important; }
}


That almost worked, but I want ONE child submenu to the main menu. This shows no child submenus. How do i change the code to reflect just ONE child submenu to the main menu?

Hi

Try with this code:

Code: Select all

@media only screen and (max-width:1040px) {
#gk-menu-overlay-wrap .gkMainMenu .childcontent .childcontent { display: none !important; }
}


that didn't work. It's now back to displaying the main menu, child of main menu, and child of child menu (3 levels total). I only want to view the main menu and child menu - no child of child menu. So total of 2 menu levels only. It will greatly reduce the clutter by eliminating any menus beyond the main and 1st child levels.

Hi

I'm having a feeling that it worked. Please tell me which elements are 3rd level which should not be there.

Example: "Our Products" = Main Menu (should be visible on mobile menu). "Our Products / Feed = Child level 1 (should be visible on mobile menu)." "Our Products / Feed / The Bib" and "Our Products / Feed / The Burp Cloth" = Child level 2 (should NOT be visible on the mobile menu. Again, this would ONLY be for the mobile menu as I would like all child menus to be visible in the desktop classic menu view. Thanks.

Hi

Ok. Add this code to override.css

Code: Select all

@media only screen and (max-width:1040px) {
#gk-menu-overlay-wrap .gkMainMenu .childcontent .childcontent { display: none !important; }
.gk-group-content { display: none; }
}


perfect - thanks. ticket closed.

Hi
Glad I could help.
---
If You were satisfied with our support please let other users know on Twitter: http://twitter.com/gavickpro or Facebook: http://www.facebook.com/gavickpro