Menu icon Foundation
Mobile menu in Off-canvas

Is there a good way to use the mobile menu functionality from top-bar navigation in the off-canvas navigation? I want the back button and the hierarchical navigation with the menu levels.

topbaroff-canvasmobile-menu

Is there a good way to use the mobile menu functionality from top-bar navigation in the off-canvas navigation? I want the back button and the hierarchical navigation with the menu levels.

Shawn Jones almost 6 years ago

I am still searching for an answer for this. Any ideas?

Brandon Arnold almost 6 years ago

You should just be able to throw a top bar into the off canvas section, because on mobile it will have collapsed down already.

Shawn Jones almost 6 years ago

I tried that and can't quite get it going. Right now, the menu is collapsed and you have to click the menu icon to expand the menu. How would I make it already be expanded when off-canvas is activated?

David Kenzik almost 6 years ago

Any update/solution for this?

Shawn Jones almost 6 years ago

I did get it to work. I think my problems related to the api calls my cms uses.

Here is the site it is working on
http://beta.kingswaychurch.org

If you use a browser to look at it, reload the page after you make your browser view narrow.

Roland Tombacz almost 6 years ago

It is fairly easy. You add the class 'expanded' to the top-bar nav like this:

<nav class="top-bar expanded" data-topbar>

And leave the title-area ul's li nodes empty, like this:

<ul class="title-area">
  <li class="name"> </li>
  <li class="toggle-topbar menu-icon"> </li>
</ul>

Optionally, you can omit the title-area ul altogether.

Shawn Jones almost 6 years ago

That's right Roland. I couldn't remember exactly what I did, but that was it.

Roland Tombacz over 5 years ago

@Shawn
Have you experienced issues with the triangular arrows of the parent rows in the menu showing only after you adjust the width of the browser window a bit? Very weird. I have checked the site you referenced and your arrows always display properly.

Shawn Jones over 5 years ago

For me, the menu is generated by the CMS I am using. So I was using jquery to add the has-dropdown classes. I had that code in the footer so it was being rendered after the page was rendered. I moved it up into the header and that seemed to fix the problem.

Hope that helps.

Roland Tombacz over 5 years ago

Solved it!

I am also using a CMS for generating the menu. But I still had the issue described above so I came up with this:

  1. Added the id 'oCNav' to the top-bar in my off-canvas layout.
  2. Modified the off-canvas toggle icon's code like this:
<a class="left-off-canvas-toggle menu-icon" onclick="setTimeout(function () { $(oCNav).addClass('expanded'); }, 500);" ><span></span></a>
  1. Modified the exit-off-canvas link like this:
<a class="exit-off-canvas" onclick="setTimeout(function () { $(oCNav).removeClass('expanded'); }, 0);"></a>

Now it works perfectly.