Change mobile menu width

[timolland]

Hi guys,

I’m using the Dante theme and on iPhone the mobile menu completely covers the screen. I would like to set this to 80%. I tried it with custom css but can’t get it to work. Could you maybe provide me with the correct css to do this?

Thanks in advance,
Tim

[Kyle – SUPPORT]

Hi, try adding this to your custom css

.mobile-menu-open #mobile-menu-wrap {
  transform: translate3d(-280px, 0px, 0px);
}
.mobile-menu-open #container {
  transform: translate3d(-280px, 0px, 0px);
}

– Kyle

[timolland]

Hi Kyle,

Thanks for your reply. I added the code in the custom css but unfortunately it’s not working.. Any other ideas? Thanks!

Tim

[Kyle – SUPPORT]

Strange, please could I check your link? It works fine on my demo

– Kyle

[timolland]

This reply has been marked as private.

[Kyle – SUPPORT]

Try add this:

#mobile-menu-wrap {
  right: -280px;
  width: 280px;
}

– Kyle

[timolland]

Hi Kyle,

Just added the css, but it’s still not working unfortunately. The menu sort of moves to the left. See screenshot for the result.

Tim

[Kyle – SUPPORT]

Ahh, looks like it’s not possible, there must be some JS that is overriding the CSS. When I view it on desktop at 320px width, it works. But on mobile it covers the screen.

Sorry about that

– Kyle