ナビゲーションが正しく動作しない

Question

私のナビゲーションは応答性があり、完全に機能しています。私に迷惑をかけている小さなものが1つしかありません。ナビゲーションにはトランジションがあり、ビューポートのサイズを768pxより小さくすると、navはスライド内のスライドに移動しますが、移動があるのでnavの移動を見ることができます。どのようにして移行を維持できますか？ビューポートのサイズを変更すると、ナビゲーションがはっきりとわかるという事実は削除されます。 http://www.zoidstudios.com/

ヘルプをいただければ幸いです：D

Answer 1

あなたは以下のことを試みることができる

私のウェブサイトはでアップしています。基本的にmargin-leftをmin-width: 768pxから-180pxに設定し、padding-leftを使用してナビを元の位置に戻します。 margin-left変更transition: all 0.3s ease-in-out;からtransition: margin-left 0.3s ease-in-out;に移行しているだけなので

.main-navigation { 
    position: fixed; 
    height: 100%; 
    width: 180px; 
    background-color: #000; 
    margin-left: -180px; 
    padding-left: 0; 
    transition: margin-left 0.3s ease-in-out; 
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: space-between; 
} 


@media screen and (min-width: 768px) 
    .main-navigation { 
     position: fixed; 
     height: 80px; 
     width: 100%; 
     margin-left: -180px; 
     padding-left: 180px; 
     background-color: transparent; 
     transition: none; 
     box-shadow: none; 
     display: flex; 
     flex-direction: row; 
     align-items: center; 
     justify-content: space-between; 
    } 
}