Menu icon Foundation

Designer | Derby

Multimedia & Internet Technology Graduate

My Posts


My Comments

Stylianos Chatziperis commented on Stylianos Chatziperis's post about 3 years

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/

Stylianos Chatziperis commented on Rich Staats's post about 3 years

Hi Rich,
I have the same problem whenever I test my website on a Samsung Galaxy Ace which runs on Android v2.3.6. More specifically when I test it using Opera Classic the "Menu-Icon" does not respond at all...it just reloads the same page. My initial problem was that the "Pancake" Icon was not even displayed on Android's default web browser, but strangely it was working when I pressed it. After spending a few hours on the forum, I read in a post from an expert that Foundation workers changed some code from the framework in the latest releases which would benefit more the modern devices and would drop support for slow and crappy phones like mine. The thing is, there is still a big number of Android users running v2.3. But not being able to make it work on a Apple iPhone and iPad is quite serious, I would suggest you submit your code and hopefully a guru guy will help you solve your problem. You can have a look at my post too, which is somehow related to yours.

Thanks

Stylianos Chatziperis commented on Stylianos Chatziperis's post about 3 years

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.

Stylianos Chatziperis commented on Stylianos Chatziperis's post about 3 years

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

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Stylianos Chatziperis's post about 3 years

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/

You commented on Rich Staats's post about 3 years

Hi Rich,
I have the same problem whenever I test my website on a Samsung Galaxy Ace which runs on Android v2.3.6. More specifically when I test it using Opera Classic the "Menu-Icon" does not respond at all...it just reloads the same page. My initial problem was that the "Pancake" Icon was not even displayed on Android's default web browser, but strangely it was working when I pressed it. After spending a few hours on the forum, I read in a post from an expert that Foundation workers changed some code from the framework in the latest releases which would benefit more the modern devices and would drop support for slow and crappy phones like mine. The thing is, there is still a big number of Android users running v2.3. But not being able to make it work on a Apple iPhone and iPad is quite serious, I would suggest you submit your code and hopefully a guru guy will help you solve your problem. You can have a look at my post too, which is somehow related to yours.

Thanks

You commented on Stylianos Chatziperis's post about 3 years

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.

You commented on Stylianos Chatziperis's post about 3 years

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

Posts Followed

Following

  • No Content

Followers

  • No Content