Joomla template containing hamburger style and traditional style menus?

Question

I am trying to create a Joomla website that contains both a hamburger menu but also a traditional (normal) menu on mobile sizes.

 

The issue I am finding is that when I select Hamburger in TemplateToaster it converts all menus into hamburgers. I am assuming the script that generates the hamburger menu on mobile sizes is coming from a JS file, however before I go poking around with that I am hoping someone already knows how to solve this issue.

Answer 1

On mobile view, the hamburger menu is set by default to maintain the responsiveness. However on desktop view, you have option to change the menu. And tablet view menu will be same as desktop menu.

Comments

Yes, this is indeed the case. However in my situation I have a menu that I do not want to turn into a hamburger menu on mobile as well as a larger menu that I do want to turn into a hamburger menu on mobile. furthermore; to my knowledge there is no way to create multiple menus in TemplateToaster and any menu that is created within Joomla attempts to follow the TemplateToaster template but breaks on mobile view.

Answer 2

I solved this issue by removing classes from the menu I do not want to turn into a hamburger menu via JavaScript.

This is the only solution I have found and defeats the purpose of both Joomla and TemplateToaster. If someone with no scripting knowledge where to create a menu within Joomla that they did not want to covert to a hamburger menu not only would this not be desirable but the menu itself would be broken on mobile screen sizes.

Perhaps there is something I missed, if anyone is aware of an easier solution to this problem please let me know.

the classes I removed from the menu: "menu-center (not sure if this one is required however I removed it just to be safe)", "collapse", "navbar-collapse", "navbar-default". Here is a link for information on how to remove a CSS class via JS.