Menu icon Foundation
Menu-Icon not showing

Hamburger Hill its showing on my iPad, shows everywhere else, any ideas?

Hamburger Hill its showing on my iPad, shows everywhere else, any ideas?

menuiconhamburger

Hamburger Hill its showing on my iPad, shows everywhere else, any ideas?

Hamburger Hill its showing on my iPad, shows everywhere else, any ideas?

Warren Kingston about 5 years ago

  <section class="middle tab-bar-section">
    <h1 class="title">Maggi</h1>
  </section>

  <section class="right-small">
    <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
  </section>
</nav>

<aside class="left-off-canvas-menu">
  <ul class="off-canvas-list">
    <li><a href="first.htm">The First</a></li>
    <li><a href="second.htm">The Second</a></li>
  </ul>
<ul class="off-canvas-list">
    <li><a href="#">Sold Items</a></li>
    <li><a href="second.htm">The First</a></li>
  </ul>
</aside>

<aside class="right-off-canvas-menu">
  <ul class="off-canvas-list">
    <li><a href="https://goo.gl/maps/EPNAd"><strong>Maggi Walters</strong><br>Toad Row<br>Henstead<br>Suffolk<br>NR34<br></a></li>
    <li><a href="#">01502</a></li>
<li><a href="#">07795</a></li>
<li><a href="#">email</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Links</a></li>
  </ul>
</aside>

<section class="main-section">
  <!-- content goes here -->
</section>

Wing-Hou Chan about 5 years ago

Hey Warren!

Is it possible you post a link to the site in development?

The markup you posted is correct and should not be causing the menu icon to disappear.

To see what is making the menu icon disappear seeing the site would help!

There was a recent problem with the menu icon however that has been fixed and I just tested the latest version of Foundation and I can confirm that the menu icon does appear.

Warren Kingston about 5 years ago

Hi Wing-Hou

Sorry for the delay. Here it is

http://www.maggiewaltersartwork.co.uk/testpage.html

Please dont blame me for the blue colours, customer is always right

Wing-Hou Chan about 5 years ago

Hey Warren!

I'm seeing the menu icons for your offcanvas!

There doesn't appear to be a problem!

Warren Kingston about 5 years ago

Strange, I did tell a little white lie in that it was my iPad, but its my business partners and i have looked and it was not there. Will get him to re-check.

Many thanks for all the help.

Must say wonderful apps, software and support.

Warren Kingston about 5 years ago

Partner says he has checked the OS of the iPad and it is an old version and has up dated and this has cured the problem.

Many thanks

Wing-Hou Chan about 5 years ago

Cool, glad to hear the problem has been solved!

Just Forms about 5 years ago

I can confirm that the menu-icon is NOT showing up with Android v2.3.6 - Samsung SPH-D700. I am using Foundation v5.3.0.

I looked at Warren's site, Zurb's Doc page as well as our dev page, none of them are successful with showing the menu-icon on Android v2.3.6:
http://www.maggiewaltersartwork.co.uk/testpage.html
http://foundation.zurb.com/docs/components/offcanvas.html

I've read through the various articles in the forums as well as:

https://github.com/zurb/foundation/pull/5268
https://github.com/zurb/foundation/issues/5199

None of the "fixes" are working:
http://foundation.zurb.com/forum/posts/2458-menu-icon-off-side-of-screen

Should I be trying to create a PNG fallback?

I wish I could contribute to a solution but I am a noob to say the least.


Wing-Hou - on the off chance you reply, I'm also trying to support scrolling
with the older mobile phone devices as well. I'm looking into:
iScroll - http://cubiq.org/iscroll-5
Overthrow - http://filamentgroup.com/lab/overthrow.html
or possibly with - http://filamentgroup.com/lab/a-different-approach-to-qualifying-css-position-fixed.html

I know it is off-topic but any suggestions for a better solution (or confirmation that one of these is a better approach than the other) would be greatly appreciated.

Thank you in advance for any help you may provide.

Wing-Hou Chan about 5 years ago

Howdy!

I think your menu-icon disappearing is due to an old browser version. It might not support the method of creating the menu-icon. That is the most probable cause.

The fix would be an SVG/PNG fallback. Alternatively I wouldn't worry too much about devices that are that old.

By the way, this solution here, http://foundation.zurb.com/forum/posts/2458-menu-icon-off-side-of-screen, was actually for a issue that was caused by something else.

Regarding your other point, I wouldn't say me replying is an off chance. And please, my friends call me "Wing". If you could create another thread for this topic that'd be great, thank you! It'll keep the Forum a more tidy place and make it easier for people to find topics.

Just Forms about 5 years ago

Wing,

Thank you very much for your speedy reply.

Unfortunately site analytics for my friend's website show that he has quite a few older android devices still accessing it. I am trying to get things to gracefully degrade. As I said I'm a noob and I'm just starting to read about progressive enhancement... next time I will look into this approach.

With Android v2.3.6, on an actual device not with an emulator (live dev tools for chrome etc.) -
Foundation's home page (http://foundation.zurb.com/) - The menu-icon shows up
Foundation's doc page for Off Canvas (http://foundation.zurb.com/docs/components/offcanvas.html) - The menu-icon does not shows up

I need to look at the code to see what is different between the two. Once I figure it out I will post back my findings. Hopefully this will help someone else out.

Since SVG/PNG fallback is the solution/fix here is what I have done (It may help another person who is just learning all of this - like me).

I have a png fallback for other SVG graphics on the page. Although it is more inline (not as clean and I think will be a maintenance nightmare - If I were to need to change out images/graphics). currently I'm using this inline approach:

I'm thinking something more like the solution by Todd Motto would work better (less inline markup): http://toddmotto.com/revisiting-svg-workflow-for-performance-and-progressive-development-with-transparent-data-uris/

You are one of the gurus over at Zurb, do you have a better approach to a SVG/PNG fallback?

As for the scrolling issues for older mobile devices I will create a new topic/post in the forums as you suggested.

Thank you again Wing, I hope you have a great weekend.

Just Forms about 5 years ago

Sorry, the code got stripped from my last post - Here is the inline code for the SVG/PNG fallback

<a href="#"><img src="./images/image_graphic.svg" onerror="this.onerror=null; this.src='./images/image_graphic.png'" alt="Alt Text Goes Here"></a>

I this helps someone else.

Wing-Hou Chan about 5 years ago

I just got my hands on an Android v2.3.3, did a test and got the results you got.

Comparing the code, there is a difference in how the menu-icon on Foundation's homepage and the Off Canvas page is created. Foundation's homepage applies the styles necessary to create the menu-icon directly onto the a element. However after a certain update to the menu-icon this method of creating the menu-icon is now depreciated. The new method is to create a span and apply it to the ::after pseudo-element. This seems to cause problems on older browsers on Android.

The update to the menu-icon is not likely to be reversed to support older versions of Android. The advantage of the new method has more benefits compared to supporting older versions of Android. The main benefit was streamlining the process to create the menu-icon and make it consistent throughout the usage of the menu-icon. Previously the Top Bar and Off Canvas had two methods of creating the menu-icon but now there is one.

As to your question if there is anything better than a SVG/PNG fallback. SVG/PNG probably has the most support. Other methods of creating the menu-icon will require pseudo-elements which Android's older browsers seem not to like. Alternatively you can use icon fonts to create your menu-icon.

Todd Motto gives some interesting solutions and I would definitely recommend them over the inline solution.

If you are using Modernizr (if not consider doing so to help with progressive enhancement) and jQuery (which you should if you want Foundation's scripts to work), you can use this nifty script (only 3 lines!):

if(!Modernizr.svg) {
  $('.yourMenuIconClass').attr('src', 'url/to/your/PNG/image.png');
}

Thanks and you have a great weekend as well!

PS I don't work for ZURB

Just Forms about 5 years ago

Wing,

First and foremost THANK YOU!

Second, such a thorough answer is going to be helpful to a lot of people. I'm seeing the icon issue showing in several threads on the Foundation's forums as well as some places over in stackoverflow.

I wish older Android and other older mobile OSs did not need support... wishful thinking but it looks like they still have a big chunk of the market. It is good for me to learn anyways, so no real complaints on my part.

I am using Mondernizr and jQuery. If I am understanding your 3 line script correctly I would need a unique instance of the script for each respective PNG fallback. Is that correct?

 if(!Modernizr.svg) {
  $('.yourMenuIconClass').attr('src', 'url/to/your/PNG/image_fallback_01.png');
}

 if(!Modernizr.svg) {
  $('.yourMenuIconClass').attr('src', 'url/to/your/PNG/image_fallback_02.png');
}
/* this would continue for each SVG graphic that needs a PNG fallback */

If I am understanding Todd's approach correctly, it seems to make a global change through javascript to replace any image ending with SVG with PNG if there is any errors with loading the SVG. Keeps it neat and short and I won't have to create new instances of the 3 line script for any new/future SVGs added to the website. Yes/No? Like I said I'm learning so any guidance is very much appreciated.

You don't work for ZURB?! WOW! as I was researching this problem you have been all over the forums and the git pages helping people... again THANK YOU! You are being very gracious with your time and expertise. ZURB should be paying you!

All the Best.

Lyn about 5 years ago

Hey there,

If you're writing it like this :

<img src="./images/image_graphic.svg" data-png="./images/image_graphic.png" alt="Alt Text Goes Here">

You may use something like this :

if(!Modernizr.svg) {
    $("img[data-png]").each(function() {
        var $this = $(this);
        $this.attr('src', $this.attr('data-png'));
    });
}

It's untested but should work... I think.

Kind regards,

Lyn.

Wing-Hou Chan about 5 years ago

Howdy!

Yes, it is a shame that older browsers seem to lack support for our menu-icon.

I did some research into support for pseudo-elements for Android browsers and apparently all Android browsers support pseudo-elements. This is strange since our evidence shows otherwise and on my own website, which uses pseudo-elements to create the menu-icon, that has disappeared as well. But never mind, there is the SVG/PNG fallback.

Todd's method aims for a global SVG/PNG fallback solution. This requires more code, but if you have other elements that require a SVG/PNG fallback, then use Todd's methods.

The nifty three line approach was designed specifically for the menu-icon fallback.

Lyn's solution is interesting and looks like it should work. But testing it wouldn't hurt. The problem I see with it is that it requires the data attribute which isn't particularly semantic.

Yea, I don't work for ZURB. People do seem surprised and I thank you for your kind words. I still remember the time when I started out being an amateur coder. And I would say the guys at ZURB HQ have been really helpful, so I'm sort of returning the favour. It also helps develop my own skills as a coder. I wouldn't mind working for ZURB to be honest, haha. ZURB are grateful for my hand in the forums and on GitHub. They like to send some swag sometimes. If you want some swag, lend a hand in the Forum or check this out: http://foundation.zurb.com/develop/contribute.html

Lyn about 5 years ago

Hey there,

Ok then, here goes another idea without any data attribute, but you need to have your svg and png files with the same name :

<img src="./images/image_graphic.svg" alt="Alt Text Goes Here">
if(!Modernizr.svg) {
    $("img[src$='.svg']").each(function () {
        var $this = $(this);
        $this.attr('src', $this.attr('src').slice(0, -3) + "png");
    });
}

Regards,

Lyn.

Just Forms about 5 years ago

Lyn and Wing,

Thank you, I will test/try things out and post back what worked.

Enjoy the remainder of your weekend.