html - Why does everything but the side-menu adjust for a mobile screen? -

this website i'm updating, fonts , icons, images etc adjust screen size. reason side-menu doesn't appear on samsung s4, have scroll right find it. on desktop adjusts fine no matter how resize browser window. should mention using chrome on s4, tested on mobile "browser" app , works fine there. website

even mobiletest website displays fine. when test on chrome mobile browser, or colleagues iphone 5s browser, menu pushed side , have swipe left see it.

here jsfiddle reason menu doesn't appear there.

edit made menu fixed screen scrolls vertically user.

html:

    <!-- navigation -->     <a id="menu-toggle" href="#" class="btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>     <nav id="sidebar-wrapper">         <ul class="sidebar-nav">             <a id="menu-close" href="#)" class="btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a>             <li class="sidebar-brand">                 <a href="#top"  onclick = $("#menu-close").click(); >the society</a>             </li>             <li>                 <a href="#top" onclick = $("#menu-close").click(); >home</a>             </li>             <li>                 <a href="#about" onclick = $("#menu-close").click(); >about event</a>             </li>             <li>                 <a href="#services" onclick = $("#menu-close").click(); >find participant</a>             </li>             <li>                 <a href="#register" onclick = $("#menu-close").click(); >register</a>             </li>             <li>                 <a href="#donate" onclick = $("#menu-close").click(); >donate</a>             </li>             <li>                 <a href="#contact" onclick = $("#menu-close").click(); >contact</a>             </li>         </ul>     </nav>      <!-- header --> <div class="blackbar"> <img src="http://convio.cancer.ca/mufe/2016/one/img/ccs_en_websafe.gif" alt="canadian cancer society" height="55" width="191" />  </div> <header id="top" class="header"> <div class="text-vertical-center">             <h1>event title</h1>             <h3>tag line</h3>             <br>             <a href="#about" class="btn-dark btn-lg">learn more</a> <p>&nbsp;</p>     <!-- log in --> <ul>          <li class="dropdown">           <a href="http://phpoll.com/login" class="dropdown-toggle btn-dark btn-lg" data-toggle="dropdown">log in</a>           <ul class="dropdown-menu dropdown-lr animated flipinx" role="menu">             <div class="col-lg-12">               <div class="text-verticle-center">                 <h5><b>log in</b></h5></div>                         </div>             </div>           </ul>         </li>      </ul>   </div> </header>  

css:

<style> body {     width: 100%;     height: 100%; }  body {      font-family: daxregular !important;     }       p {    font-family: daxlight !important; }   {   text-decoration: none !important;  }  .bg-primary {     background-color: #0066cc !important; }  .text-vertical-center {     display: table-cell;     text-align: center;     vertical-align: middle; }  .text-vertical-center h1 {     margin: 0;     padding: 0;     font-size: 4.5em;     font-weight: 700; }  .text-vertical-center h2 {     margin: 0;     padding: 0;     color: #fff;     font-size: 5.5em;     font-weight: 700;  }  /* side menu */  #sidebar-wrapper {     z-index: 1000;     position: fixed;     right: 0;     width: 250px;     height: 100%;     margin-right: -250px;     overflow-y: auto;     background: #222;     -webkit-transition: 0.4s ease 0s;     -moz-transition: 0.4s ease 0s;     -ms-transition: 0.4s ease 0s;     -o-transition: 0.4s ease 0s;     transition: 0.4s ease 0s; }  .sidebar-nav {     position: absolute;     top: 0;     width: 250px;     margin: 0;     padding: 0;     list-style: none; }  .sidebar-nav li {     text-indent: 20px;     line-height: 40px; }  .sidebar-nav li {     display: block;     text-decoration: none;     color: #999; }  .sidebar-nav li a:hover {     text-decoration: none;     color: #fff;     background: rgba(255,255,255,0.2); }  .sidebar-nav li a:active, .sidebar-nav li a:focus {     text-decoration: none; }  .sidebar-nav > .sidebar-brand {     height: 55px;     font-size: 18px;     line-height: 55px; }  .sidebar-nav > .sidebar-brand {     color: #999; }  .sidebar-nav > .sidebar-brand a:hover {     color: #fff;     background: none; }  #menu-toggle {     z-index: 101;     position: fixed;     top: 0;     right: 0; }  #sidebar-wrapper.active {     right: 250px;     width: 250px;     -webkit-transition: 0.4s ease 0s;     -moz-transition: 0.4s ease 0s;     -ms-transition: 0.4s ease 0s;     -o-transition: 0.4s ease 0s;     transition: 0.4s ease 0s; }  .toggle {     margin: 5px 5px 0 0; }  /* header */  .header {     display: table;     position: relative;     width: 100%;     height: 100%; background: url(http://convio.cancer.ca/mufe/2016/one/img/cliffside.jpg) no-repeat center center scroll;     -webkit-background-size: cover;     -moz-background-size: cover;     background-size: cover;     -o-background-size: cover;  }  .header h1 {     font-size: 5.5em;     color: #fff;     text-shadow: 2px 2px 2px rgb(0,0,0); }  .header h3{     font-size: 4em;     color: #fff;     text-shadow: 2px 2px 2px rgb(0,0,0); }  .header h4{     font-size: 6.5em;     color: #fff;     text-shadow: 2px 2px 2px rgb(0,0,0); }     </style> 

thank time!

there lot of errors on website.

first : change #menu-toggle fixed absolute , seems doing trick keep button on page ( withought having scroll right )

but

at point still can scroll right , caused because fixed pretty , width:100%; known having kind of issues. should fix errors have in html , try make div float. should fix white space on right.

edit : hiding sidebar-wrapper on right of screen. not best option when can use display:none; if white space on right doesn't bother you, change position fixed absolute #menu-toggle