title: How can i fix the dropdown menu when i scroll down on phone it goes away
body: <p>On Windows small screen it works but on phone it goes away, I tried so many things but I can't find something to fix, or way to go around.</p>
  
  <p><a href="https://meedia-testomgeving.nu/index.html" rel="nofollow noreferrer">https://meedia-testomgeving.nu/index.html</a></p>
  
  <p>I have followed a guides. and some youtube video's but it didnt work. About navigation menu. I don't know what kind of code I used it some time ago.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;header&gt;   
  &lt;nav id="cssmenu"&gt;
  &lt;div class="logo"&gt;&lt;img src="Meedia Producten PC &amp; Hardware/Background/Home Page&amp;Favicon&amp;Footer/Meedia LOGO.png"&gt;&lt;/div&gt;
  &lt;div id="head-mobile"&gt;&lt;/div&gt;
  &lt;div class="button-nav"&gt;&lt;/div&gt;
  &lt;ul&gt;
  &lt;li class="active"&gt;&lt;a href="index.html"&gt;HOME&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="Over ons.html"&gt;OVER ONS&lt;/a&gt;
     &lt;ul&gt;
         &lt;li&gt;&lt;a href="Voor Ouders.html" target=""&gt;Voor Ouders&lt;/a&gt;&lt;/li&gt;
           &lt;ul&gt;
           &lt;/ul&gt;
        &lt;/li&gt;
               &lt;li&gt;&lt;a href="Voor Hulpverleners.html" target=""&gt;Voor Hulpverleners&lt;/a&gt;&lt;/li&gt;
           &lt;ul&gt;
           &lt;/ul&gt;
         &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="Meedoen met meedia.html"&gt;MEEDOEN MET MEEDIA&lt;/a&gt;
     &lt;ul&gt;
         &lt;li&gt;&lt;a href="ICT &amp; Multimedia.html" target=""&gt;ICT &amp; Multimedia&lt;/a&gt;&lt;/li&gt;
           &lt;ul&gt;
           &lt;/ul&gt;
        &lt;/li&gt;
             &lt;li&gt;&lt;a href="Fashion &amp; Lifestyle.html" target=""&gt;Fashion &amp; Lifestyle&lt;/a&gt;&lt;/li&gt;
           &lt;ul&gt;
           &lt;/ul&gt;
        &lt;/li&gt;
  
               &lt;li&gt;&lt;a href="Onderwijs Ondersteuning.html" target=""&gt;Onderwijs Ondersteuning&lt;/a&gt;&lt;/li&gt;
           &lt;ul&gt;
           &lt;/ul&gt;
         &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="Producten.html"&gt;PRODUCTEN&lt;/a&gt; 
     &lt;ul&gt;
        &lt;li&gt;&lt;a href="PC &amp; Hardware.html" target=""&gt;PC &amp; Hardware&lt;/a&gt;
           &lt;ul&gt;
              &lt;li&gt;&lt;a href="Meedia Market PC.html" target="_blank"&gt;PC&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="Meedia Market Laptop.html" target="_blank"&gt;Laptop&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="Meedia Market Monitoren.html" target="_blank"&gt;Monitoren&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="Meedia Market Randapparatuur.html" target="_blank"&gt;Randapparatuur&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="Meedia Market Hardware.html" target="_blank"&gt;Hardware&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="Meedia Market Onderdelen.html" target="_blank"&gt;Onderdelen&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="Meedia Market Netwerk.html" target="_blank"&gt;Netwerk&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="Meedia Market Printers.html" target="_blank"&gt;Printers&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="Market Fashion &amp; Lifestyle.html"&gt;Fashion &amp; LifeStyle&lt;/a&gt;
           &lt;ul&gt;
              &lt;li&gt;&lt;a href="Meedia Market Kasten.html" target="_blank"&gt;Kasten&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="Meedia Market Lampen.html" target="_blank"&gt;Lampen&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="Meedia Market Manden.html" target="_blank"&gt;Manden&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="Meedia Market Stoelen.html" target="_blank"&gt;Stoelen&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="Meedia Market Iets aan de wand.html" target="_blank"&gt;iets aan de Wand&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="Meedia Market sign borden.html" target="_blank"&gt;Sign Borden&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="Meedia Market Boekjes.html" target="_blank"&gt;Boekjes&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="Meedia Market Kleding.html" target="_blank"&gt;Kleding&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
         &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="Nieuws.html" target=""&gt;NIEUWS&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="Foto's.html" target=""&gt;FOTO'S&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="Contact.html"&gt;CONTACT&lt;/a&gt;
  
    &lt;ul&gt;
         &lt;li&gt;&lt;a href="Contactformulier.html" target=""&gt;Contactformulier&lt;/a&gt;&lt;/li&gt;
           &lt;ul&gt;
           &lt;/ul&gt;
        &lt;/li&gt;
           &lt;ul&gt;
           &lt;/ul&gt;
        &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;/header&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>*{margin:0;padding:0;text-decoration:none}
  body{background:url(Images/.jpg)}
  header{position:relative;width:100%;background:#333;}
  .logo{position:relative;z-index:123;padding:10px;font:18px verdana;color:#31a3dd;float:left;width:19%}
  .logo a{color:#31a3dd;}
  nav{position:relative;width:1010px;margin:0 auto;}
  #cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile{border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
  #cssmenu:after,#cssmenu &gt; ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
  #cssmenu #head-mobile{display:none}
  #cssmenu{font-family:sans-serif;background:#333}
  #cssmenu &gt; ul &gt; li{float:left}
  #cssmenu &gt; ul &gt; li &gt; a{padding:17px;font-size:12px;letter-spacing:1px;text-decoration:none;color:#FFFFFF;font-weight:700;}
  #cssmenu &gt; ul &gt; li:hover &gt; a,#cssmenu ul li.active a{color:#fff}
  #cssmenu &gt; ul &gt; li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{background:#31a3dd!important;-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;}
  #cssmenu &gt; ul &gt; li.has-sub &gt; a{padding-right:30px}
  #cssmenu &gt; ul &gt; li.has-sub &gt; a:after{position:absolute;top:22px;right:11px;width:8px;height:2px;display:block;background:#ffffff;content:''}
  #cssmenu &gt; ul &gt; li.has-sub &gt; a:before{position:absolute;top:19px;right:14px;display:block;width:2px;height:8px;background:#ffffff;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
  #cssmenu &gt; ul &gt; li.has-sub:hover &gt; a:before{top:23px;height:0}
  #cssmenu ul ul{position:absolute;left:-9999px}
  #cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#333;transition:all .25s ease}
  #cssmenu ul ul li:hover{}
  #cssmenu li:hover &gt; ul{left:auto}
  #cssmenu li:hover &gt; ul &gt; li{height:35px}
  #cssmenu ul ul ul{margin-left:100%;top:0}
  #cssmenu ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:11px 15px;width:170px;font-size:12px;text-decoration:none;color:#FFFFFF;font-weight:400;}
  #cssmenu ul ul li:last-child &gt; a,#cssmenu ul ul li.last-item &gt; a{border-bottom:0}
  #cssmenu ul ul li:hover &gt; a,#cssmenu ul ul li a:hover{color:#fff}
  #cssmenu ul ul li.has-sub &gt; a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#ffffff;content:''}
  #cssmenu ul ul li.has-sub &gt; a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#ffffff;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
  #cssmenu ul ul &gt; li.has-sub:hover &gt; a:before{top:17px;height:0}
  #cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background:#363636;}
  #cssmenu ul ul ul li.active a{border-left:1px solid #333}
  #cssmenu &gt; ul &gt; li.has-sub &gt; ul &gt; li.active &gt; a,#cssmenu &gt; ul ul &gt; li.has-sub &gt; ul &gt; li.active&gt; a{border-top:1px solid #333}
  
  @media screen and (max-width:1000px){
  .logo{position:absolute;top:0;left: 0;width:100%;height:46px;text-align:center;padding:10px 0 0 0 ;float:none}
  .logo2{display:none}
  nav{width:100%;}
  #cssmenu{width:100%}
  #cssmenu ul{width:100%;display:none}
  #cssmenu ul li{width:100%;border-top:1px solid #444}
  #cssmenu ul li:hover{background:#363636;}
  #cssmenu ul ul li,#cssmenu li:hover &gt; ul &gt; li{height:auto}
  #cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}
  #cssmenu &gt; ul &gt; li{float:none}
  #cssmenu ul ul li a{padding-left:25px}
  #cssmenu ul ul li{background:#333!important;}
  #cssmenu ul ul li:hover{background:#363636!important}
  #cssmenu ul ul ul li a{padding-left:35px}
  #cssmenu ul ul li a{color:#FFFFFF;background:none}
  #cssmenu ul ul li:hover &gt; a,#cssmenu ul ul li.active &gt; a{color:#fff}
  #cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}
  #cssmenu &gt; ul &gt; li.has-sub &gt; a:after,#cssmenu &gt; ul &gt; li.has-sub &gt; a:before,#cssmenu ul ul &gt; li.has-sub &gt; a:after,#cssmenu ul ul &gt; li.has-sub &gt; a:before{display:none}
  #cssmenu #head-mobile{display:block;padding:23px;color:#FFFFFF;font-size:12px;font-weight:700}
  .button-nav{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;}
  .button-nav:after{position:absolute;top:22px;right:20px;display:block;height:4px;width:20px;border-top:2px solid #FFFFFF;border-bottom:2px solid #FFFFFF;content:''}
  .button-nav:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:16px;right:20px;display:block;height:2px;width:20px;background:#FFFFFF;content:''}
  .button-nav.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
  .button-nav.menu-opened:before{top:23px;background:#fff;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
  #cssmenu .submenu-button-nav{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #444;height:46px;width:46px;cursor:pointer}
  #cssmenu .submenu-button-nav.submenu-opened{background:#262626}
  #cssmenu ul ul .submenu-button-nav{height:34px;width:34px}
  #cssmenu .submenu-button-nav:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#FFFFFF;content:''}
  #cssmenu ul ul .submenu-button-nav:after{top:15px;right:13px}
  #cssmenu .submenu-button-nav.submenu-opened:after{background:#fff}
  #cssmenu .submenu-button-nav:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#FFFFFF;content:''}
  #cssmenu ul ul .submenu-button-nav:before{top:12px;right:16px}
  #cssmenu .submenu-button-nav.submenu-opened:before{display:none}
  #cssmenu ul ul ul li.active a{border-left:none}
  #cssmenu &gt; ul &gt; li.has-sub &gt; ul &gt; li.active &gt; a,#cssmenu &gt; ul ul &gt; li.has-sub &gt; ul &gt; li.active &gt; a{border-top:none}
  }
  
  
  #cssmenu{
  z-index: 1000;
  position:relative;
  }
  
  #cssmnu {
    opacity: 1.1;
  }   
  </code></pre>
  
  <p><strong>JQuery</strong></p>
  
  <pre><code>(function($) {
  $.fn.menumaker = function(options) {  
   var cssmenu = $(this), settings = $.extend({
     format: "dropdown",
     sticky: false
   }, options);
   return this.each(function() {
     $(this).find(".button-nav").on('click', function(){
       $(this).toggleClass('menu-opened');
       var mainmenu = $(this).next('ul');
       if (mainmenu.hasClass('open')) { 
         mainmenu.slideToggle().removeClass('open');
       }
       else {
         mainmenu.slideToggle().addClass('open');
         if (settings.format === "dropdown") {
           mainmenu.find('ul').show();
         }
       }
     });
     cssmenu.find('li ul').parent().addClass('has-sub');
  multiTg = function() {
       cssmenu.find(".has-sub").prepend('&lt;span class="submenu-button-nav"&gt;&lt;/span&gt;');
       cssmenu.find('.submenu-button-nav').on('click', function() {
         $(this).toggleClass('submenu-opened');
         if ($(this).siblings('ul').hasClass('open')) {
           $(this).siblings('ul').removeClass('open').slideToggle();
         }
         else {
           $(this).siblings('ul').addClass('open').slideToggle();
         }
       });
     };
     if (settings.format === 'multitoggle') multiTg();
     else cssmenu.addClass('dropdown');
     if (settings.sticky === true) cssmenu.css('position', 'fixed');
  resizeFix = function() {
    var mediasize = 1000;
       if ($( window ).width() &gt; mediasize) {
         cssmenu.find('ul').show();
       }
       if ($(window).width() &lt;= mediasize) {
         cssmenu.find('ul').hide().removeClass('open');
       }
     };
     resizeFix();
     return $(window).on('resize', resizeFix);
   });
    };
  })(jQuery);
  
  (function($){
  $(document).ready(function(){
  $("#cssmenu").menumaker({
     format: "multitoggle"
  });
  });
  })(jQuery);
  
  </code></pre>
  
  <p>Thanks already</p>