AshleyC Posted September 15, 2016 Share Posted September 15, 2016 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted September 15, 2016 Share Posted September 15, 2016 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 15, 2016 Share Posted September 15, 2016 see http://w3schools.invisionzone.com/index.php?showtopic=55883 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now