sidenavのテキストは私が閉じるときに台無しになる

Question

私はsidenavを作りました（それはそれが呼び出されたものであるかどうかはわかりません）が私のサイトにありましたが、閉じるときにsidenavのテキストが乱れる。私は@media screen and (max-width: 50px)を試しましたが、ofcourseはオーバーレイ上で動作しません。

私が何を意味しているか見たいと思えば： https://jsfiddle.net/ehyLghy8/ 私を信じて、それは私の最終的なウェブサイトで悪く見えます。

テキストを所定の位置に置き、ナビを閉じるときに左に移動しない方法はありますか？

あなたのフォーム要素に最小幅を追加した場合、これは適切な結果を達成するの悪い英語

Answer 1

にあなたをラップしません私はあなたのCSS

#myNav{ 
    width:100%; 
    transform: translateX(-100%) 
} 

でこれを追加しジュスト

：代わりに幅のtransformプロパティを使用することができますND変換して再生するには、あなたの関数を変更します。

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

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

Answer 2

のため申し訳ありません。以下達成するインスタンスmin-width: 600px;については

：私たちは、その要素が600PXよりも小さくすることにしたくないことを私たちは言っている。これによりhttps://jsfiddle.net/ehyLghy8/1/

を、したがって、テキストは

Answer 3

ラベル

form label { 
    white-space: nowrap; 
} 

でwhite-space: nowrapを試してみて、これは望ましい動作ですか？