Navbar Icon Not Showing In Some Browsres

I am working on a responsive webpage. I am using a custom navbar, as follows; On my PC and my iPhone, I can see the navbar icon as I want: iPhone Screenshot: But on my Android de

Solution 1:

please use this code in your style sheet add

@media screen and (max-width: 680px) {
ul.topnavli.icon {
display: block;
}
}

Solution 2:

Since you have given float:rigt to icon it's pushed beyond the device width in android. Adding a margin-right fixed the issue for me.

@media screen and (max-width: 680px)
ul.topnav li.icon {
    float: right;
    margin-right: 10%;
    display: inline-block !important;
}

One more invalid property I found in ul.topnav is margin and padding value was just plan numerical. Please use the following snippet

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 10px;
    width: 100%;
    display: inline-block;
}

Solution 3:

Try this -

@media screen and (max-width: 680px) {
  ul.topnavli:not(:first-child) {
    display: none;
  }

  ul.topnavli {
    float:right;
  }

  ul.topnavli.icon {
    display: inline-block;
  }
}

https://jsfiddle.net/chris2001/Lc57jw4c/1/

Not sure if it is what you want though.