My Mobile navigation isn't sending me to the pages it's supposed to

I’m trying to use this method of navigation for my responsive website: http://css-tricks.com/convert-menu-to-dropdown/

The problem I’m having is my navigation for mobile isn’t working. I can select the items but it doesn’t send me to any page when I select a item from the list. Here is the website: http://css-tricks.com/convert-menu-to-dropdown/

Anyone have any idea why it’s not functioning how it should?

Thanks,

Hi,

We’d need to see the site in question or at least your own html and css to debug further.:slight_smile:

http://test.koolcollar4dogs.com/ woopsy. I accidentally posted the same link twice.

Where’s the main jquery file that this js needs:


$("nav select").change(function() {
  window.location = $(this).find("option:selected").val();
});


Is this what is missing?

// Create the dropdown base
$("<select />").appendTo("nav");

// Create default option "Go to..."
$("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Go to..."
}).appendTo("nav select");

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

I tried putting that in but it didn’t seem to do anything either. I’ll try it again.

No, you don’t have the jquery library added which is what the script is using.

e.g. This if you want to link directly:

<script type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js”></script>

It should go above all other scripts.

Ahh ok, that makes sense. I’ve added it yet it’s still not working. I’m really not familiar with java or jquery so I’m at a loss to what’s happening in this code. Perhaps there is a line or two that I need to tweak?

Oh figured it out. Had to add <nav> tags to the navigation in the HTML. Thanks for your help Paul!