Redimensionare versiune mobila

Salut, detion o tema responsive, nu prea cunosc css, asa ca am venit aici sa va cer ajutor. Despre ce e vorba? Cand redimensionezi fereastra browserului la o dimensiune de mobil, aceasta isi preia versiunea de mobil, dar exista un mic bug. Atunci cand deschizi meniul, il lasi deschis si faci fereastra mare (maximize), meniul de mobil ramane pe pagina, odata cu cel de dekstop.

Acelasi topic il gasiti si la sectiune javascript dar cineva m-a informat ca nu are treaba cu js-ul ci cu css-ul.

Puteti vedea un demo aici(faceti pasii de mai sus): http://evobikes.ro/ya/

Codul din css:

@media screen and (max-width: 640px){
div#topBar{
  height: 50px;
}

div#topBar nav{
  display: none;
}
 
div#topBar #mobileNav{
  display: block;
  color: #FFF;
  line-height: 50px;
  cursor: pointer;
  float: right;
}

div#topBar .mobileHome{
  line-height: 50px;
  color: #FFF;
  display: block;
  float: left;
}

nav#mobileNavigation{
  position: absolute;
  width: 100%;
  z-index: 100;
}

nav#mobileNavigation ul{
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

nav#mobileNavigation ul li{
  height: 50px !important;
  width: 100%;
}

nav#mobileNavigation ul li a{
  height: 50px !important;
  width: 100%;
  font-size: 12px;
  color: #FFF;
  box-shadow: inset 0px 1px 0px #2a3a45;
  background: rgb(31,44,54); /* Old browsers */
  background: -moz-linear-gradient(top, rgb(31,44,54) 0%, rgb(19,27,33) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(31,44,54)), color-stop(100%,rgb(19,27,33))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgb(31,44,54) 0%,rgb(19,27,33) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgb(31,44,54) 0%,rgb(19,27,33) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgb(31,44,54) 0%,rgb(19,27,33) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgb(31,44,54) 0%,rgb(19,27,33) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f2c36', endColorstr='#131b21',GradientType=0 ); /* IE6-9 */
  float: left;
  line-height: 50px;
  text-align: center;
}

nav#mobileNavigation ul li a.login{
  color: #FFF;
  background: rgb(136,183,62); /* Old browsers */
  background: -moz-linear-gradient(top, rgb(136,183,62) 0%, rgb(105,158,22) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(136,183,62)), color-stop(100%,rgb(105,158,22))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgb(136,183,62) 0%,rgb(105,158,22) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgb(136,183,62) 0%,rgb(105,158,22) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgb(136,183,62) 0%,rgb(105,158,22) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgb(136,183,62) 0%,rgb(105,158,22) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88b73e', endColorstr='#699e16',GradientType=0 ); /* IE6-9 */
  box-shadow: inset 0px 1px 0px #AAEF40;
}
}

probabil are lagatura cu

nav#mobileNavigation { display: none; }

care ar trebui sa se regaseasca in celalalt css pentru versiunea > 640px , ca sa fie ascunse cand ai mai mult de 640 pixeli ?

Edited by onlyone, 24 December 2013 - 12:52.

Urmatorul cod referitor cu 640px:

@media screen and (max-width: 640px){
div.slider h1{
  margin-top: 50px;
}
div.sliderWrapper #slideControls{
  position: absolute;
  z-index: 100;
  bottom: 20px;
  width: 100%;
}
div.mainSlider{
  display: none;
}
div.mobileSlider{
  display: block;
}
}

cred ca tu trebuie sa adaugi linia asta

nav#mobileNavigation { display: none; }

in

@media screen and (max-width: 1000px){

Am pus, degeaba.

Se poate verifica la acelasi link

cred ca trebuie sa pui si in bootstrap.css ....

incearca sa modifici una din proprietatile @media (min-width: 768px) cum ar fi cea de mai jos

@media (min-width: 768px) {
  .lead {
        font-size: 21px;
  }
  nav#mobileNavigation { display: none; }
}

Am incercat, inzadar.

mda pentru ca nu e acolo
m-am uitat cu firebug si proprietatea display:block nu vine din css ci din java script, si nu este setata inapoi pe display:none cand creste rezolutia
js/build.js

acum cineva care stie jquery poate iti da o mana de ajutor...

adica

//Mobile Navigation
$('#mobileNav').click(function(){
  $('#mobileNavigation').slideToggle(1000);
});

cand dai click pe buton se expandeaza navigatia, mai dai odata click se strange navigatia
insa ramane setata proprietatea display:block cand se redimenzioneaza fereastra...

Edited by onlyone, 24 December 2013 - 19:55.