Android and the "Hamburger" menu icon

[Jonesy]

Trying to become familiar with W3.CSS, I'm creating a website for both practice and to list the things I feel I need to work on.

 

On Linux desktop, everything works great. Even using the tools tab to Responsive Design Mode and shrinking to size of my phone works great. BUT, from what I gather, Android has a problem with using the "hamburger" icon. It simply doesn't show up on my phone. I can tap where it's supposed to be and get the menu; so, I know it's there. (No one else would know to do so).

 

I used the code in both the W3.CSS - Navigation - Collapsing The Navigation Bar section and the Sidenav - Collapsible Responsive Sidenav section. The first is obvious at where where the icon is located. I have replaced it with the text "MENU" as a temporary work around. With the Sidenav code, however, I cannot tell where the icon comes into play and, as such, have no clue how to work around it.

 

So, three questions:

 

1) Is there an "official" way to "force' this icon upon Android; or, something commonly accepted and recognized across platforms?

 

2) Where in the sidenav code does the icon come into play so that I may change it or force it upon Android?

 

3) Are there other common problems using W3.CSS in various platforms?

 

Thanks for any guidance!

 

Jonesy

[Ingolme]

This piece of code generates the icon: ☰

 

It's a Unicode character which may not be supported by the font that Android is using to render the page. My suggestion to solve that is to either use an image or use something like FontAwesome

[Jonesy]

Wow! I feel stupid. After adding it into my code, I forgot about the w3_open function inside the "main" div. I was only looking in the navigation divs.

 

Thanks! I'll check out Font Awesome as well.

[Jonesy]

Now how do I delete that link in my original post? I see no edit controls once it's posted.