Menu off canvas bug mobile

Question

I don't know if it's really a bug, but what happens is: I'm in mobile and activate my offcanvas menu if I scroll down to the bottom of the page the menu is cutted and when the scroll finish he backs to the normal, I think that it's because I'm using position fixed, I'm putting a print that I took on my cellphone.My server of tests is http://tiagotestes.esy.es/portfolio (PS: The images used there aren't mine, I just used for tests) I really don't know how to solve that, looks like it's a rendering problem...

Print:

HTML:

<nav class="off-canvas" id="offcanvas">
         <ul class="itens">
            <a href="#banner" id="offlinkbanner">
               <li class="off-item">
                  <h2>Inicio</h2>
               </li>
            </a>
            <a href="#sobremim">
               <li class="off-item">
                  <h2>Sobre Mim</h2>
               </li>
            </a>
            <a href="#habilidades">
               <li class="off-item">
                  <h2>Habilidades</h2>
               </li>
            </a>
            <a href="#portfolio">
               <li class="off-item">
                  <h2>Portfólio</h2>
               </li>
            </a>
            <a href="#contato">
               <li class="off-item">
                  <h2>Contato</h2>
               </li>
            </a>
         </ul>
      </nav>

Css:

.off-canvas{
  transition: all .4s linear;
  -webkit-transition: all .4s linear;
  -moz-transition: all .4s linear;
  -o-transition: all .4s linear;
  padding-top: 50px;
  left: -300px;
  background-color: #292929;
  height: 100%;
  width: 250px;
  position: fixed;
  text-align: left;
  z-index: 9;

}

Js that makes the magic:

function mostraCanvas(offcanvas, toggle, expand) {
    offcanvas.css("left", "0");
   // expand.css("display", "inline");
   // toggle.css("display", "none");
}

Answer 1

Here is what i think you should change in your code if i am understanding you correctly.

Scenario 1:

You want the offcanvas menu to cover the whole screen width when open. For that you need to make the following changes.

In the @media only screen and (max-width: 1021px) .off-canvas css class:

1. Change width:250px; to width:100vw;
2. Add min-width:250px; .
3. Change height:100%; to height:100vh;

In the scripts.js file, the function escondeCanvas(offcanvas, toggle, expand) , change the offcanvas.css("left", "-300px"); to offcanvas.css("left", "-100vw");

The above changes will make the menu cover the whole screen width and height wise.

Scenario 2:

When you scroll in mobile the first time after load. The menu seems to shift to top and leave a blank space at the bottom and when the scroll stops the blank space is filled by the gray background.

I believe this is due to the address bar disappearing in mobile when you scroll up on any web page. In the @media only screen and (max-width: 1021px) .off-canvas css class, Change height:100%; to height:100vh; . And just to make sure, add padding-bottom: 50px; .

Detail on Scenario 1 and 2 answers: vw and vh are viewport units. They take into account the full screen size of the device without any element or property effecting it. Eg 100% unit may only use the space within the element it is set for where as 100vh or 100vw is the full screen height or width respectively of the device the page is loaded on.

Scenario 3: You want to keep the width and height as default ie but when you scroll down with the menu open, the top gray menu layer that toggle background color to transparent and back based on top scroll shows up which should only show up when the menu is not open.

You need to make changes in the function trocaNav(navbar, imgtoggle, topo, posicao, itensmenu) in the script file to check and change the background color of the topo div from transparent to gray only if the menu is open. Example logic to check the menu open you can put condition on the off-canvas left margin. If the left is 0 then the menu is open and if the left is -300px or undefined then the menu is closed.

Hope this helps.