Menu icon Foundation

Developer | Hungary

My Posts

No Content

My Comments

Roland Tombacz commented on Shawn Jones's post over 5 years

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.

Roland Tombacz commented on Shawn Jones's post over 5 years

@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.

Roland Tombacz commented on Shawn Jones's post over 5 years

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.

Posts Followed


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Shawn Jones's post over 5 years

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.

You commented on Shawn Jones's post over 5 years

@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.

You commented on Shawn Jones's post over 5 years

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.

Posts Followed


Following

  • No Content

Followers

  • No Content