Menu icon Foundation

Coder

My Posts


  • 3
    Replies
  • Menu Icon Problem

    By Mike Tesla

    mobiletopbarmenu icon

    In Foundation 5, when the Menu is toggled you get a weird box shape under the word MENU. (Provided you have menu wrapped in a span in the HTML.) Also, the Menu icon doesn't change color. (True whether or not you have the span.) This can be fixed by ch... (continued)

    Last Reply by Mike Tesla over 5 years ago



My Comments

Mike Tesla commented on Mike Tesla's post over 3 years

Thanks so much! That was it; it was missing the span tag wrapping.

Mike Tesla commented on Jiří Forst's post almost 4 years

I investigated this further and discovered that if the ajax modal contains just plain text, Magellan works fine. However, as soon as the ajax modal includes HTML (even simply wrapping the text in a tag) Magellan locks up once the modal is opened.

Here is a jsfiddle:
http://jsfiddle.net/zkq72ztv/1/

Things work properly, as the ajax modal loads a plain text file. However, if you just switch that to something that includes html, the problem is manifest: opening the modal causes Magellan to lock.

Obviously, this is no workaround, as most any modal will need html. But hopefully this is a useful hint towards the root cause of the problem.

Mike Tesla commented on Jiří Forst's post almost 4 years

Did you ever find a solution to this issue? I am encountering the same problem now. (I using Foundation 5.5.2.)

Mike Tesla commented on Mike Tesla's post over 5 years

Just wanted to note that this portion of the css is clearly to draw the menu icon. Since the icon doesn't change upon toggle (with or without the span in the html) changing the css is the solution rather than removing the span tags from the html.

Mike Tesla commented on Mike Tesla's post over 5 years

It happens in the last couple 5.xx versions, in both FF and Chrome.

In your code at http://cdpn.io/BCDfy you can see the artifact if you change this line of the html:
HTML
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>

to:
HTML
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>

Here it is: http://codepen.io/anon/pen/eJhuv

Note that the templates (http://foundation.zurb.com/templates.html) include the span tags around the menu.

Without the span tags you don't get that box, but the icon doesn't change color when toggled.

Posts Followed



Following

    No Content

Followers

My Posts




My Comments

You commented on Mike Tesla's post over 3 years

Thanks so much! That was it; it was missing the span tag wrapping.

You commented on Jiří Forst's post almost 4 years

I investigated this further and discovered that if the ajax modal contains just plain text, Magellan works fine. However, as soon as the ajax modal includes HTML (even simply wrapping the text in a tag) Magellan locks up once the modal is opened.

Here is a jsfiddle:
http://jsfiddle.net/zkq72ztv/1/

Things work properly, as the ajax modal loads a plain text file. However, if you just switch that to something that includes html, the problem is manifest: opening the modal causes Magellan to lock.

Obviously, this is no workaround, as most any modal will need html. But hopefully this is a useful hint towards the root cause of the problem.

You commented on Jiří Forst's post almost 4 years

Did you ever find a solution to this issue? I am encountering the same problem now. (I using Foundation 5.5.2.)

You commented on Mike Tesla's post over 5 years

Just wanted to note that this portion of the css is clearly to draw the menu icon. Since the icon doesn't change upon toggle (with or without the span in the html) changing the css is the solution rather than removing the span tags from the html.

You commented on Mike Tesla's post over 5 years

It happens in the last couple 5.xx versions, in both FF and Chrome.

In your code at http://cdpn.io/BCDfy you can see the artifact if you change this line of the html:
HTML
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>

to:
HTML
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>

Here it is: http://codepen.io/anon/pen/eJhuv

Note that the templates (http://foundation.zurb.com/templates.html) include the span tags around the menu.

Without the span tags you don't get that box, but the icon doesn't change color when toggled.

Posts Followed

Following

  • No Content

Followers

  • No Content