22271

Navbar icon not showing in some browsres

Question:

I am working on a responsive webpage. I am using a custom navbar, as follows;

<pre class="snippet-code-js lang-js prettyprint-override"> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } <pre class="snippet-code-css lang-css prettyprint-override">/* Remove margins and padding from the list, and add a black background color */ ul.topnav { list-style-type: none; margin: 10; padding: 10; overflow: hidden; } /* Float the list items side by side */ ul.topnav li { float: left; margin: 10; padding: 10; } /* Style the links inside the list items */ ul.topnav li a { display: inline-block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 40px; } /* Change background color of links on hover */ /* ul.topnav li a:hover {background-color: #fff;} /* Hide the list item that contains the link that should open and close the topnav on small screens */ ul.topnav li.icon { display: none; } /* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */ @media screen and (max-width: 680px) { ul.topnav li:not(:first-child) { display: none; } ul.topnav li.icon { float: right; display: inline-block; } } /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */ @media screen and (max-width: 680px) { ul.topnav.responsive { position: relative; } ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } <pre class="snippet-code-html lang-html prettyprint-override"><ul class="topnav" id="myTopnav"> <li> <a href="#news"> <img class="img-responsive" width="60px" src="imagenes/botones/logo_hera.png" /> </a> </li> <li> <a href="#news"> <img class="img-responsive" width="180px" src="imagenes/botones/doctores_boton.png" /> </a> </li> <li> <a href="#news"> <img class="img-responsive" width="180px" src="imagenes/botones/hospitales_boton.png" /> </a> </li> <li> <a href="#news"> <img class="img-responsive" width="180px" src="imagenes/botones/farmacias_boton.png" /> </a> </li> <li> <a href="#news"> <img class="img-responsive" width="180px" src="imagenes/botones/laboratorios_boton.png" /> </a> </li> <li class="icon"> <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> </li> </ul>

On my PC and my iPhone, I can see the navbar icon as I want:

iPhone Screenshot: <a href="https://i.stack.imgur.com/NHwad.jpg" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/NHwad.jpg" data-original="https://i.stack.imgur.com/NHwad.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

But on my Android device it looks as follows:

<a href="https://i.stack.imgur.com/xcVIS.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/xcVIS.png" data-original="https://i.stack.imgur.com/xcVIS.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

There is no navbar icon visible.

What is wrong at my code?

EDIT:

I know the toggle icon is there, but not visible. It works when touched

Answer1:

please use this code in your style sheet add

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

Answer2:

Since you have given float:rigt to <em>icon</em> 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; }

Answer3:

Try this -

@media screen and (max-width: 680px) { ul.topnav li:not(:first-child) { display: none; } ul.topnav li { float:right; } ul.topnav li.icon { display: inline-block; } }

<a href="https://jsfiddle.net/chris2001/Lc57jw4c/1/" rel="nofollow">https://jsfiddle.net/chris2001/Lc57jw4c/1/</a>

Not sure if it is what you want though.

Recommend

  • Changing div heights using CSS grid
  • How to set div exactly in the center of screen whose size is changing dynamically
  • Javascript - Infinite scroll JSON array?
  • dojo 1.9: what annotation does declare.safeMixin add?
  • How do one only submit click event (div), when using jquery live function?
  • TCPDF's getNumLines() is sometimes wrong
  • Play Framework nested form errors missing
  • Animating an SVG Group
  • Unity 5.1 Animator Controller not transitioning
  • Spring Web Flow exception handling
  • Microsoft Chart Controls for Microsoft .NET Framework 4.0
  • css calendar - td background diagonal split - two colors
  • Is mp4 stream able with ffserver?
  • IOS > Open URL in Safari with POST
  • Selectively hide background elements when overlayed with transparent div
  • Python/Javascript: WYSIWYG html editor - Handle large documents fast and/or design theory
  • IE10 strips out hashtag from the URL
  • Jquery Mobile pageLoading() Method how does it work?
  • Plotting densities in R
  • Update Google Maps traffic layer without page reloading
  • Installing iPhone App to iPhone
  • How to modify the colors in the legend of a plot using a fill gradient?
  • Time complexity of a program which involves multiple variables
  • Mysterious problem with floating point in LISP - time axis generation
  • Custom validator control occupying space even though display set to dynamic
  • Atlas images wrong size on iPad iOS 9
  • Highlight and Bold text in JTextPane
  • Change multiple background-images with jQuery
  • Xamarin Forms - UWP Fonts
  • Android screen density dpi vs ppi
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Change an a tag attribute in JavaScript based on screen width
  • ActionScript 2 vs ActionScript 3 performance
  • To display the title for the current loaction in map in iphone
  • Unanticipated behavior
  • Traverse Array and Display in markup
  • How to set the response of a form post action to a iframe source?
  • JTable with a ScrollPane misbehaving