Jorian Koning Jorian Koning - 5 months ago 7
CSS Question

Text in sidenav gets messed up when i close it

I made a sidenav (not even sure if that is what its called) on my site but when I close it, the text in the sidenav gets messed up. I tried

@media screen and (max-width: 50px)
but that ofcourse doesn't work on a overlay.

If you want to see what i mean:
Trust me, it looks worse on my final website.

Is there any way to have the text stand in place and not moving to the left when I close the nav?

Sorry for bad english


You can use the transform property instead of the width:

I juste add this in your css

  transform: translateX(-100%)

and modify your functions to play with transform:

function openNav() {
    document.getElementById("myNav").style.transform = "translateX(0)";

function closeNav() {
    document.getElementById("myNav").style.transform = "translateX(-100%)";