導航轉換不能正常工作

Question

好吧所以我的導航是響應和充分工作，以及有點。只有一件小事讓我煩惱。導航欄有一個轉換，當您調整小於768像素的視口大小時，導航欄會在導航欄中進入幻燈片，但您可以看到導航欄移動，因爲它有一個轉換。我怎樣才能保持轉換，但消除了在調整視口大小時可以清楚地看到導航的事實。

我的網站是安裝在：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; 
    } 
}