mobil menu selv programmering

Hej Eksperter

Er ved at lave så min mobilmenu virker i wordpress har sat det hele op med jquery har kilderne vist i vis kildekode i browseren så det skulle være på plads.

Vil så høre om hvor det går galt, har før lavet en mobil menu men ikke til Wordpress.
Ved der er plugins til sådan noget, men det er altså sjovere at have i hænderne, selvom jeg ved jeg spørger om hjælp.
Men vil gerne lære det ;o)

Her er min jquery:
$(function(){
    $('#menu-topmenu').prepend('<div id="menu-button">Menu</div>');
  $( '#menu-button' ).click(function(event){
      event.preventDefault();
        $( "ul" ).toggleClass("open");
  });
});

Her er min css:
@media all and (max-width: 800px){
#menu-button {
    padding:20px;
    font-weight:bold;
}
#menu-topmenu > ul {
    display:none;
}
#menu-topmenu > ul.open {
    display: block;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
#menu-topmenu {
    background: #333;
    background: -moz-linear-gradient(top, #333 0%, #CCC 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(100%, #CCC));
    background: -webkit-linear-gradient(top, #333 0%, #CCC 100%);
    background: -o-linear-gradient(top, #333 0%, #CCC 100%);
    background: -ms-linear-gradient(top, #333 0%, #CCC 100%);
    background: linear-gradient(to bottom, #333 0%, #CCC 100%);
    color:#FFF;
    cursor:pointer;
    width:100%;
}
#menu-topmenu > ul > li > ul {
    padding:0px 0px 0px 20px;
    background-color:#ff6600;
    font-weight:normal;
    list-style:none;
    display: block;
}
#menu-topmenu > ul > li {
    color:#FFF;
    font-weight:bold;
    list-style:none;
    font-family: 'Open Sans', Helvetica, sans-serif;
    background: #333;
    background: -moz-linear-gradient(top, #333 0%, #CCC 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(100%, #CCC));
    background: -webkit-linear-gradient(top, #333 0%, #CCC 100%);
    background: -o-linear-gradient(top, #333 0%, #CCC 100%);
    background: -ms-linear-gradient(top, #333 0%, #CCC 100%);
    background: linear-gradient(to bottom, #333 0%, #CCC 100%);
    width:100%;
}
#menu-topmenu ul > li{
    padding:0px 0px 0px 0px;
    text-indent: 10px;
    line-height:46px;
}
#menu-topmenu #menu-button::after {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
    right: 25px;
    top: 22px;
}
#menu-topmenu #menu-button::before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #FFF;
    right: 25px;
    top: 32px;
}

Og alt bliver vist igennem min function fil:
function kis_add_styles(){
  wp_enqueue_style('style', get_stylesheet_uri());
  wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');
  wp_enqueue_style('mobil_menu', get_template_directory_uri() . '/css/mobil_menu.js');
  wp_enqueue_style('jquery', 'http://code.jquery.com/jquery.js');
}
add_action('wp_enqueue_scripts', 'kis_add_styles');

Håber der er en der kan hjælpe med at finde problemet.

Med venlig hilsen
Morten