Menu icon Foundation

Designer | Nyíregyháza, Hungary

photographer / web designer

My Posts

No Content

My Comments

Gábor Fábián commented on satheesh's post over 5 years

The url bar is not hidden, because you have to scroll the body so it triggers the url bar to hide. With the Foundation off-canvas the problem is that the body has the screen's height (height: 100%), so you can't scroll it up. When you're scrolling, you are only doing it in the inner-wrap container, which has overflow: scroll, but scrolling in it doesn't trigger the url bar to hide, because your document's hight is always the window's height. I hope it's easy to understand.

I've found a way fixing this, but you either have to modify your off canvas handler js file, or you just accept that the off canvas menu will not animate / slide in (will not have a changed parent class, because Step 2).

So, basicly:

Step 1:
Remove the height: 100% from the html & body, maybe the container div's as well (off-canvas-wrap, inner-wrap) but might not be necessary.

Step 2:
Move the sidenav and the aside off-canvas-menu out of the off-canvas-wrap, give them position fixed and remove their initial translate3d.

Step 3:
Give your off-canvas-menu some lower z-index than the off-canvas-wrap has, and maybe give some background color to the off-canvas-wrap so your menu won't be visible behind it.

I messed up this commit a bit, not only the relevant changes made into it, but you'll get the idea from here: https://github.com/FabianGabor/fabiangabor-html/commit/6a6d6b57d495a008e18b88374162bd59ddb35046

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on satheesh's post over 5 years

The url bar is not hidden, because you have to scroll the body so it triggers the url bar to hide. With the Foundation off-canvas the problem is that the body has the screen's height (height: 100%), so you can't scroll it up. When you're scrolling, you are only doing it in the inner-wrap container, which has overflow: scroll, but scrolling in it doesn't trigger the url bar to hide, because your document's hight is always the window's height. I hope it's easy to understand.

I've found a way fixing this, but you either have to modify your off canvas handler js file, or you just accept that the off canvas menu will not animate / slide in (will not have a changed parent class, because Step 2).

So, basicly:

Step 1:
Remove the height: 100% from the html & body, maybe the container div's as well (off-canvas-wrap, inner-wrap) but might not be necessary.

Step 2:
Move the sidenav and the aside off-canvas-menu out of the off-canvas-wrap, give them position fixed and remove their initial translate3d.

Step 3:
Give your off-canvas-menu some lower z-index than the off-canvas-wrap has, and maybe give some background color to the off-canvas-wrap so your menu won't be visible behind it.

I messed up this commit a bit, not only the relevant changes made into it, but you'll get the idea from here: https://github.com/FabianGabor/fabiangabor-html/commit/6a6d6b57d495a008e18b88374162bd59ddb35046

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content