W3CSS Mobile Collapse

[AshleyC]

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.

[justsomeguy]

If you're looping over database results or something like that, then instead of trying to loop over the results multiple times you should save them in an array. That way you can loop over them however many times you want without having to reset the result pointer or send another database query or whatever.

[dsonesuk]

see http://w3schools.invisionzone.com/index.php?showtopic=55883