Menu icon Foundation
Menu Icon is not displayed on certain Android smartphones

Hi everyone,

I am new to Foundation and I decided to build my website using this framework. So far I have two problems regarding the responsive menu (or the "top-bar" in Foundation terms). I have a Samsung Galaxy Ace running 2.3.6 and when I tested my website using its built in browser the home page looks fine but the horizontal three column menu (pancake icon) is not displayed. If I write the word "MENU" inside the it is displayed. In addition, I visited Browserstack to generate screenshots for different mobile displays and even if all iPhone models had no problem displaying the Menu Icon, Samsung Galaxy S & S2 did not. That was my first problem.

The second problem is again about the Topbar in Android using Opera Classic or Mini as a browser. In plain words when I touch the Menu icon (which is not displayed :P) nothing happens...it just reloads the page, the menu does not expand downwards to show the navigation links. However it responds fine using Android's built in browser. I have no idea how to fix this or what causes this problem.

menu iconresponsive menutopbarnot workingNot Displayedandroid

Hi everyone,

I am new to Foundation and I decided to build my website using this framework. So far I have two problems regarding the responsive menu (or the "top-bar" in Foundation terms). I have a Samsung Galaxy Ace running 2.3.6 and when I tested my website using its built in browser the home page looks fine but the horizontal three column menu (pancake icon) is not displayed. If I write the word "MENU" inside the it is displayed. In addition, I visited Browserstack to generate screenshots for different mobile displays and even if all iPhone models had no problem displaying the Menu Icon, Samsung Galaxy S & S2 did not. That was my first problem.

The second problem is again about the Topbar in Android using Opera Classic or Mini as a browser. In plain words when I touch the Menu icon (which is not displayed :P) nothing happens...it just reloads the page, the menu does not expand downwards to show the navigation links. However it responds fine using Android's built in browser. I have no idea how to fix this or what causes this problem.

Stylianos Chatziperis about 3 years ago

      <nav class="top-bar" data-topbar role="navigation">
        <ul class="title-area">
          <li class="name"></li>
          <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
        </ul>

        <section class="top-bar-section">
        <ul>
          <li class="divider"></li>
          <li>
          <a href="index.html">home</a>
          </li>
          <li class="divider"></li>
          <li>
            <a href="work.html">work</a>
          </li>
          <li class="divider"></li>
          <li>
            <a href="about.html">about</a>
          </li>
          <li class="divider"></li>
          <li>
            <a href="contact.html">contact</a>
            </li>
          <li class="divider"></li>
        </ul>

        </section>
      </nav>



    <div class="row">
      <div class="large-12 columns">
      <h1>Hi, My name is Stelios and I am a Web Designer.</h1>
      </div>
    </div>



    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>

Gabriel Martin about 3 years ago

Personally, I think using a png is a good idea for a workaround, I'm guessing it's some kind of font/svg issue, depending on where you're loading the icon from.

Here's a great resource for that https://www.iconfinder.com/

Regarding your second question, I believe that I found a related issue, in which the commenter answers that non-webkit Opera is not supported. This could be the same issue you're running into.

http://foundation.zurb.com/forum/posts/19194-opera-drop-down-menu-issue

Stylianos Chatziperis about 3 years ago

Hi Gabriel,
Thanks a lot for your reply.

My knowledge with Javascript and Modernizr is basic to none, I have started learning JS but I am still on the basics. Since I am using an SVG logo on my Website I found a script which I pasted into Modernizr to replace .svg with .png and it worked for older browsers which do not support SVG.

However when it comes to the Menu-Icon, I think this is a different case because I haven't found any kind of image or PNG or SVG inside Foundation's folder which indicates that it is used on the Topbar. It might be a font-icon but because my knowledge is limited I cannot figure out how would I replace Foundation's default icon (which I have no idea where it is and how it is generated) with a PNG fallback. I managed to load a "Pancake" PNG icon in the top bar but It is sits next to the default one. Now here's the problem, if I leave it like that modern smartphone devices will show both icons side by side...There are some many variables which I am not in position to solve at the moment due to my lack of knowledge.

Thanks.

Wing-Hou Chan about 3 years ago

Howdy everyone!

Unfortunately certain Android devices don't seem to support our menu icon.

Check out this thread for the discussion on it and for potential solutions: http://foundation.zurb.com/forum/posts/17139-menu-icon-not-showing

No PNG/SVG menu icon is provided in Foundation's repo. That you will have to make yourself or download from somewhere on the internet. It's not hard to make, after it is only three lines on top of each other.

To use the PNG/SVG fallback go to the thread mentioned above and check out the solutions above.

As for your second problem, please could you post a link to the site in development?

Stylianos Chatziperis almost 3 years ago

Hi Wing-Hou Chan,

thanks a lot for the link of the thread, it was very helpful.

This is the link where I still develop my website. As I said before the menu does not respond at all (it only reloads the same page when I click it) when I use Opera Classic or Mini on a Samsung Galaxy Ace which runs Android Version 2.3.6. However it works fine when I use the phone's built in browser... :P

http://stelioshadjiperis.com/stelios/

Wing-Hou Chan almost 3 years ago

Unfortunately I don't have the hardware available to recreate the problem you are experiencing. There's not much I can do from that front.

I would recommend that you attempt a remote debug. Use your favourite search engine to search for "Opera remote debug". You might want to add to your search terms: "Android", "classic" or "mini".

Good luck finding a solution!

dolly11 10 days ago

Hello Guys, Thanks for sharing such an amazing article.

 

If you want to install & download titanium backup no root application , then click here and get it.