Material Design menu opens differently on mobile and pc

Anvil Q&A
1

Hey there,

First timer with Anvil, could use some help with a basic issue :slight_smile:

When I open the material design menu on PC, it looks like this:
image

And on my Pixle 2, like this:

image
image1080×1920 98.7 KB

How can I make the mobile version open like the PC version and not on top of the screen?

Thanks!

2

the problem with the first version on a mobile is that it shrinks the content of the page so you wouldn’t want that to happen.

perhaps you want a version that doesn’t hide the header?
if you go to theme.css there is one thing you can change to make this happen

it’s on line 211.

@media (max-width: 998px)
html:not(.designer) .nav-holder .left-nav {
    position: fixed;
    top: 56px;  /* change me from 0 to 56px */
    bottom: 0;
    width: calc(100% - 56px);
    max-width: 360px;
    z-index: 3;
    border-right: none;
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
    display: none;
    transition: right 0.5s;
}
1 Like
3

Thank you!
It worked like a charm!
Only that I had to use 106px instead of 56px to get the required results but it works nonetheless!

Thank you :smiley:

4

I was happy too fast haha…

It seems there’s another problem there.
When I scroll down, the menu goes down too instead of staying up (like in my PC for example):

image
image1080×1920 126 KB

But when it opens, it is indeed in the correct place. Just want it to stay there if I scroll down on the active page.

5

try swapping fixed for absolute
and

    bottom: calc(100% - 100vh);
6

I’ve changed these fields like you said and it finally works!
Thanks!

position: absolute;
top: 106px;
bottom: calc(100% - 100vh);
1 Like