Secondary Omega Menu

[Matt Zimmermann]

Hi Leslie,

For that, I would recommend using CSS to hide those links on larger screens.

[lesliekirk]

Hi Leslie,

To have multiple omega menus, you would have to modify the scripting to loop through all instances of the navigation which would, probably, require considerable work to test and implement. That not withstanding, the practice of having multiple "hamburger" menus, especially in a mobile situation, if frowned up from a usability standpoint. Depending on what is causing this need, you may want to research a different option.

Off the top of my head, I can't remember which ReadyTheme had the additional menu as part of the mobile menu, but that's what I need, the ability to have links in the mobile menu that don't display in the desktop menu.

[Matt Zimmermann]

Hi Leslie,

To have multiple omega menus, you would have to modify the scripting to loop through all instances of the navigation which would, probably, require considerable work to test and implement. That not withstanding, the practice of having multiple "hamburger" menus, especially in a mobile situation, if frowned up from a usability standpoint. Depending on what is causing this need, you may want to research a different option.

[lesliekirk]

I may be going about this all the wrong way but I'm needing to add a second "hamburger" menu for the mobile view (click the second icon and a different menu set opens in the same fashion as the primary_navigation). I understand that the Omega Menu is javascript drive. I was wondering if I could just add a few lines to it so it could activate the second menu. So far I haven't blown the javascript up but it just doesn't work.

I added this to the omega-navaigation.js

let omegaNavigation = document.querySelector('[data-hook="omega-navigation_1"]');
let omegaContent = document.querySelector('[data-hook="omega-navigation_1__content"]');
let parentLinks = document.querySelectorAll('[data-hook~="omega-navigation_1__link"]');
let childrenLinks = document.querySelector('[data-hook~="omega-navigation_1__children"]');

But I think I need to change the omegaNavigation to something else too (but don't quite understand what needs to be done)


and I created the secondary_navigation (and added the item to the Global Header) and updated all the data-hooks from data-hook="omega-navigation" to include a _1 (for example data-hook="omega-navigation_1")\


Yeah, I'm probably doing this all wrong.