title: Mobile menu don't show on mobile phone only on desktop
body: <p>I created CSS mobile menu on my site and it works fine on my laptop. When i minimize browser on laptop under 680px default menu became mobile menu, but on smartphone don't work like that it stay default menu. What did I do wrong? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* CSS Document */
  body{
   font-family: 'Prompt', Sans-serif;
   background-image: url(wallpaper.png);
   background-color:#ECCB6C;
   background-repeat: no-repeat;
   background-attachment: fixed;
   margin: 0;
   padding: 0;
   text-align: center;
   }
  header{
   background-image:url(logo.png);
   background-repeat:no-repeat;
   background-position:bottom left;
   width:60%;
   height:220px;
   margin:0 auto;
   padding:0;
   }
  nav{
   width:70%;
   height:auto;
   margin:0 auto 3px auto;
   background-image:url(hfbkg.png);
   padding:0 80px 0 80px;
   }
  nav ul{
   overflow:hidden;
    padding:0;
   text-align:center;
   margin:0;
   transition:max-height 0.4s;
   -webkit-transition:max-height 0.4s;
   -ms-transition:max-height 0.4s;
   -moz-transition:max-height 0.4s;
   -o-transition:max-height 0.4s;
   }
  nav ul li{
   display:inline-block;
   padding:5px 7px;
   }
  nav ul li:hover{
   background-color:#FFFFFF;
   }
  .handle {
   width:100%;
   text-align:left;
   box-sizing:border-box;
   padding:15px 10px;
   cursor:pointer;
   color:#FFFFFF;
   display:none;
   }
   
  @media screen and (max-width: 680px){
   nav ul{
    max-height:0;
   }
   .showing{
    max-height:20em;
   } 
   nav ul li{
    box-sizing:border-box;
    width: 100%;
    padding:15px 0px;
    margin:0;
    text-align:left; 
   }
   .handle{
    display:block;
   }
   }
   
  @media (max-width:680px){
   #kontakt{
    width:100%;
   }
   #iframe{
    width:100%;
   }
   }
   
  section{
   width:70%;
   height:auto;
   background-image:url(textbkg.png);
   line-height:1.5em;
   font-size:1.1em;
   padding:60px 80px;
   margin:0 auto;
   clear:both;
   }
  section a:link {
   color:#000000;
   }
  section a:hover {
   text-decoration: none;
   color:#FFAE00;
   }
  section a:visited {
   text-decoration: none;
   color:#000000;
   }
  #textarea{
   width:350px;
   height:200px;
   padding:2px;
   margin:5px;
   }
  #ime{
   width:350px;
   height:20px;
   padding:2px;
   margin:5px;
   }
  #email{
   width:350px;
   height:20px;
   padding:2px;
   margin:5px;
   }
  #decoupauge img{
   margin:1%;
   border: thick solid;
   with: 15px;
   color: #353439;
   padding:2px;
   }
  #ukrasi img{
   margin:1%;
   border: thick solid;
   with: 15px;
   color: #353439;
   padding:2px;
   } 
  #sponzori{
   margin:5%;
   align-content:center;
   }
  #kontaktobr{
   width:400px;
   height:auto;
   margin:20px 0;
   padding:10px;
   float:left;
   }
  #iframe{
   float:right;
   margin:20px 0;
   padding:10px;
   }
  #adresa { /* pošto su iframe i kontakt obrazac u floatu u adresi ne smije biti float zato što adresa razvlači section background do footera */
   width:410px;
   height:auto;
   margin:10px;
   padding:20px;
   }
  #adresa p {
   margin:0px;
   padding:0;
   }
  #adresa a:link{
   color:#000000;
   text-decoration: none;
   }
  #adresa a:hover{
   text-decoration: none;
   color:#FFAE00;
   }
  footer{
   width:70%;
   height:auto;
   margin:3px auto 0 auto;
   background-image:url(hfbkg.png);
   padding:5px 80px;
   text-align:end;
   color:#FFFFFF;
   clear:both;
   }
  footer a:hover{
   color:#FBEE9A;
   } 
  a{
   margin:0;
   }
  a:link {
   color: #FFFFFF;
   text-decoration: none;
   }
  a:visited {
   text-decoration: none;
   color:#FFFFFF;
   }
  a:hover {
   text-decoration: none;
   color:#363539;
   }
  a:active {
   text-decoration: none;
   color: #363539;
   }
  p{
   text-align:justify;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Index&lt;/title&gt;
  &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Prompt" rel="stylesheet"&gt;
  &lt;style type="text/css"&gt;
  body,td,th {
   font-family: Prompt, Sans-serif;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body background="wallpaper.png"&gt;
  
  &lt;header&gt;
  &lt;/header&gt;
  &lt;nav&gt;
  &lt;ul&gt;
      &lt;a href="index.html"&gt;&lt;li&gt;Početna&lt;/li&gt;&lt;/a&gt;
      &lt;a href="terapija.html"&gt;&lt;li&gt;Terapije&lt;/li&gt;&lt;/a&gt;
      &lt;a href="galerija.html"&gt;&lt;li&gt;Glerija&lt;/li&gt;&lt;/a&gt;
      &lt;a href="donacije.html"&gt;&lt;li&gt;Donacije&lt;/li&gt;&lt;/a&gt;
      &lt;a href="linkovi.html"&gt;&lt;li&gt;Linkovi&lt;/li&gt;&lt;/a&gt;
      &lt;a href="kontakt.html"&gt;&lt;li&gt;Kontakt&lt;/li&gt;&lt;/a&gt;
   &lt;/ul&gt;
   &lt;div class="handle"&gt;Menu&lt;/div&gt;
   &lt;/nav&gt;
   &lt;section&gt;
     &lt;h3&gt;&lt;strong&gt;O nama&lt;/strong&gt;&lt;/h3&gt;
     &lt;p&gt; Udruga je počela sa radom 2013. godine..&lt;/p&gt;
      &lt;/section&gt;
      &lt;script&gt;
   $('.handle').on('click', function(){
    $('nav ul').toggleClass('showing');
   });
   &lt;/script&gt;
  
  &lt;footer&gt;
  &lt;a&gt;Copyright 2016&lt;/a&gt;
  &lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>