How Navigation menu on desktop and mobile works

[kitdang]

I went and tinker with the main navigation yesterday. This causes my level-2 on the mobile menu to go blank. The desktop version look fine. After looking through the code, my navigation-set has been hide

<ul id="js-navigation-set" class="navigation-set horizontal-mega-menu hide">

but I don't see it create a new ul tag with the class name 'clone'

<ul class="clone">

Is there something I am missing that helped trigger the clone class?

[Matt Zimmermann]

Re: How Navigation menu on desktop and mobile works

@kitdang - The cloning of the navigation is handled through JavaScript. Can you post a link to the site in question?

[kitdang]

Re: How Navigation menu on desktop and mobile works

Hi Matt,

Sorry, didnt' want to post the link since it's still under development. However, I did private message you on the link.

Thanks

[Matt Zimmermann]

Re: How Navigation menu on desktop and mobile works

@kitdang - Since your child UL of the level-1 LI is within DIVs, I believe that is what is causing the navigation not to populate. You may want to try duplicating the navigation code for the mobile navigation to create the clone yourself.

[kitdang]

Re: How Navigation menu on desktop and mobile works

Thanks Matt. Do you know which js file is creating the clone? I like to see how it works before manually creating the clone myself.

[Matt Zimmermann]

Re: How Navigation menu on desktop and mobile works

@kitdang - The function is part of the Mobile Navigation portion of the plugins.js file.

[kitdang]

Re: How Navigation menu on desktop and mobile works

Okay, I won't be able to tinker with that. So for someone like me that wanted to enhance their navi, do you recommend a certain structure that doesn't break the mobile js? Thanks and appreciate the help

[Matt Zimmermann]

Re: How Navigation menu on desktop and mobile works

@kitdang - My only thought for this might be to duplicate the navigation structure in the navigation bar so you have a traditional nested UL which is hidden on desktop and make the custom DIVs hidden for non-desktop.