Skip to content

Instantly share code, notes, and snippets.


dubrod/MODX Nav Switch

Last active Dec 13, 2015
What would you like to do?
Switch MODX Nav from <ul> to <select> when mobile device detected.
Change Nav UL to Select when Mobile.
System Settings: Turn off resource and snippet caching. cacheable default is none. no pages can be cached.
1. add mobile_device_detect.php to the root folder
2. make sure jquery is called at the top of every page
<script src=""></script>
3. New snippet [[navswitch]]
if($mobile_browser){ ?>
$(function(){$("nav select").change(function() {window.location = $(this).find("option:selected").val();});});
<nav><select><option value="">NAVIGATION</option>[[Wayfinder? &startId=`0` &outerTpl=`navOutTpl` &rowTpl=`mobilerowTpl`]]</select></nav>
<? } else { ?>
<nav><ul>[[Wayfinder? &startId=`0` &outerTpl=`navOutTpl`]]</ul></nav>
<? } ?>
4. create a chunk called: navOutTpl
5. create a chunk called: mobilerowTpl
<option [[]][[+wf.classes]] value="[[]]">[[+wf.linktext]][[+wf.wrapper]]</option>
6. Add Full Width CSS
nav select{width:100%; padding: 10px 0;}
nav select option{ padding: 10px 0; vertical-align:middle; text-transform: uppercase; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.