Jump to content

AshleyC

Members
  • Posts

    1
  • Joined

  • Last visited

AshleyC's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Hi everyone I am using W3CSS on a MyBB project, and would like to know if there is an alternate solution to collapsing navbars on mobile, one that does not require you to duplicate links. The solution given at W3schools goes like this: <ul class="w3-navbar w3-large w3-black w3-left-align"> <li class="w3-hide-medium w3-hide-large w3-black w3-opennav w3-right"> <a href="javascript:void(0);" onclick="myFunction()">☰</a> </li> <li><a href="#">Home</a></li> <li class="w3-hide-small"><a href="#">Link 1</a></li> <li class="w3-hide-small"><a href="#">Link 2</a></li> <li class="w3-hide-small"><a href="#">Link 3</a></li> </ul> <div id="demo" class="w3-hide w3-hide-large w3-hide-medium"> <ul class="w3-navbar w3-left-align w3-large w3-black"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </div> <div class="w3-container"> <p>In the example below, the navigation bar is replaced with a button (☰) in the top right corner when shown on tablets and mobile devices. When the button is clicked, the navigation bar will be displayed stacked.</p> <p>Resize the screen to see the effect.</p> </div> <script> function myFunction() { var x = document.getElementById("demo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> The problem is that some of these links include ids eg. <span id="multiquote_{$post['pid']}"> which results in the 2nd instance of the link not to work. It either works on large screens or mobile, but not both. I would appreciate an alternate solution, if someone has one.
×
×
  • Create New...