Menu a discesa reattivo con dimensioni dello schermo più piccole

Question

Lavorando su un modello a tema e nel tentativo di rendere il menu reattivo, in modo che cambierà da un layout orizzontale in un formato a blocchi a una determinata risoluzione dello schermo. Ho provato un tutorial che non riuscivo a lavorare, mancanza di esperienza per mio conto, ma anche un po 'incerto su come implementare su WordPress poiché il menu viene generato in modo dinamico e il tutorial era basato su un menu a struttura HTML fissa. Ora tentando un secondo ma colpisce un muro al momento, da cui la mia domanda.

Il tutorial che sto seguendo si trova di seguito, l'autore è stato utile ma non voglio spingere la sua pazienza. Ho alcuni commenti sul suo blog, che spiega un po 'ma ribadisca tutto di seguito.

http://www.justin thall.com/responsive-drop-down-menu-with-css-media-queries-jquery/#comment-8391

Ho copiato il suo script java in un file chiamato mobile-menu.js, quindi ho registrato e accolto nel modo corretto all'interno di funzioni.php

Sto usando un sito Web di test http://www.simples.net23.net

Il CSS che sto usando è il seguente:

/*=========== helper classes =====================*/
p.mobile-nav {
  display: none;
  margin-bottom: .5em;
  font-size: 1.4em !important; }
p.mobile-nav span {
  font-size: 1.3em; }
.mobile li {
  display: block;
  width: 43%;
  border-bottom: 1px solid #ccc;
  float: left;
  padding: 10px 0;
  font-size: 1.2em;
}
@media only screen
and (max-width : 768px) {
  p.mobile-nav {
  display: block; }
}

Non ho posizionato tutto il codice Java qui in quanto si tratta di circa 30 righe ed è forse meglio leggere sul suo blog.

Di seguito è riportato un po 'del codice dal mio header.php File, per quanto riguarda il menu:

<header id="header_container" class="group">

<div id="nav">      
<nav class="main-menu">
Menu <span>+</span>
<?php   /* Adding the menu called 'main' to the header, within HTML5 tag */
wp_nav_menu( array( 'theme_location' => 'main' ) );
?>
</nav>
</div>

</header>

Penso che il mio problema sia con il mio HTML e CSS e usando i selettori corretti in modo che la sceneggiatura Java possa funzionare è magia. Ho esaminato il menu generato con Firebug, ma come è generato da WordPress con un po 'di problema che comprende la struttura e quindi i selettori corretti da utilizzare.

Saluti,

Formica