title: Unable to make responsive navigation
body: <p>I am making site responsive. I am using the following code to make navigation as select box for mobile devices. But the code is not working. Am I missing something ?</p>
  
  <pre><code>&lt;nav id="main-nav"&gt;
  &lt;table cellspacing="0" cellpadding="0" border="0"&gt;
      &lt;tr&gt;
          &lt;!--START: menuitems_view--&gt;
          &lt;!--START: TOP_LINK_FORMAT--&gt;
          &lt;td nowrap="nowrap"&gt;
              &lt;a href="infopage.asp?page=[link_id]"
                 class="menu" target="[link_target]"&gt;
                 [link_name]
              &lt;/a&gt;
          &lt;/td&gt;
          &lt;!--END: TOP_LINK_FORMAT--&gt;
          &lt;!--END: menuitems_view--&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;select&gt;&lt;/select&gt;
  </code></pre>
  
  <p></p>
  
  <p>Script code is as follow :</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {  
  //Appending Select in NAv for Small Resolutions Devices
  
  // Create the dropdown base
  $("&lt;select /&gt;").appendTo("#main-nav");
  
  // Create default option "Go to..."
  $("&lt;option /&gt;", {
     "selected": "selected",
     "value"   : "",
     "text"    : "Site Navigation..."
  }).appendTo("#main-nav select");
  
  // Populate dropdown with menu items
  $("#main-nav a, #main-nav a").each(function() {
      var el = $(this);
      $("&lt;option /&gt;", {
          "value"   : el.attr("href"),
          "text"    : el.text()
      }).appendTo("#main-nav select");
  });
  $("#main-nav select").change(function() {
         window.location = $(this).find("option:selected").val();}
      );
  
  });
  
  &lt;/script&gt;
  </code></pre>