Jorian Koning Jorian Koning - 6 months ago 10
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:
https://jsfiddle.net/ehyLghy8/
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

Answer

You can use the transform property instead of the width:

I juste add this in your css

#myNav{
  width:100%;
  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%)";
}