Responsive WordPress Menus

Taken from Studio Nashvegas:

Here is a working example of the responsive select menu:

A few months ago I modified a really cool WordPress template and started using it for my own clients.  As part of the overhaul, I realized that there was no really good way (included) to turn a WordPress unordered list into a menu that would work on a mobile device.  I tried a few different solutions, but in the end went for the simple one.  A selection (drop-down) menu works well, allows for an infinite number of parent and child categories, and is easily done with a simple jQuery script.

I’ve since modified that script, and wanted to share it as a snippit with you.  Make sure you have jQuery loaded somewhere before this script:

// Create the dropdown base
$(".menu-main-container li a").addClass("top-level");
$(".menu-main-container .sub-menu li a").addClass("second-level");
$("<select class='main-drop' />").appendTo(".menu-main-container");

// Create default option "Go to..."
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Main Navigation"
}).appendTo(".menu-main-container select");

// Populate dropdown with menu items
$(".menu-main-container li a").each(function() {
var el = $(this);
$("<option />", {
"value" : el.attr("href"),
"text" : el.text(),
"class" : el.attr("class")
}).appendTo(".menu-main-container select");

// Allows user to automatically "submit" selection and travel to page
$(".menu-main-container select").change(function() {
window.location = $(this).find("option:selected").val();

// adds a dash to second-level classes
$('<p>- </p>').prependTo('option.second-level');


Here is some css:

display: none;

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

display: block;
width: 94%;
margin: 10px 3% 10px;



Tags: , ,

No comments yet.

Leave a Reply