Question

when we reduce the browser size to iphone screen a menu button appears…..
when we click the button the overlay appears……….
but the overlay appears when we increase the browser size….
how to hide the over lay….
[e-mail]

http://jsfiddle.net/QYvrt/17/
http://jsfiddle.net/QYvrt/17/embedded/result/

@media (max-width: 767px) {

#rightSlider{
    border: 1px solid red;
}

#rightSlider{
            display:none !important;
          }
#rightSlider{ 
            display:inherit !important;
          }

}

#slidenav{
            display:none !important;
          }
#slidenav{ 
            display:inherit !important;
          }

}

Answer 1

make another media query that say when the width is bigger than x width go to display none

@media all and (max-width:300){show overlay}
    @media all and (max-width:1024){hide overlay}