移動導航覆蓋問題

我有一個網站響應其工作方式到目前爲止必需的，但在移動導航設置我的網站上所有的鏈接都無法點擊或將鼠標懸停。我假設它是關於導航背景的寬度和高度的問題，但我想移動導航單擊時以填充屏幕。移動導航覆蓋問題

見下面我的代碼;

nav.mobile { 
    display: block; 
    position: fixed; 
    top: 6.2rem; 
    width: 100%; 
    height: 100%; 
    background-color: #fff; 
    z-index: 3; 
    box-shadow: 0px 1px 0px 0px rgba(41, 70, 97, 0.2); 
    transform: translate(0, -160px); 
    transition: all 0.3s ease-out; 
    padding-bottom: 0rem; 
    opacity: 0; 
    //added this for demo only. On a mobile device max width is not necessary. 
} 
nav.mobile--open { 
    transform: translate(0, 0); 
    opacity: 1; 
} 
nav.mobile ul { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 
nav.mobile li.link { 
    font-family: "Colfax-Light", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: 400; 
    font-size: 1rem; 
    padding: 1.5rem 0 0.5rem 1.5rem; 
} 
nav.mobile li.link a { 
    color: $blue_bg; 
    display: block; 
    text-decoration: none; 
    &:hover{ 
    color: $green; 
    } 
}

任何幫助真的很感激！

來源

2016-12-01 Owen Dawson

PLZ給我演示鏈接 – Logeshwaran

你可以創建一個小提琴手或張貼圖片？ –

http://oakwood-services.co.uk/dev/ –

您是否嘗試過在vh單位增加高度

nav.mobile--open { 
    transform: translate(0, 0); 
    opacity: 1; 
    height: 100vh; 
    overflow: auto; 
}

來源

2016-12-01 12:17:43

這個作品但它允許用戶仍然滾動 - 它需要被固定在頂部，你不能滾動。 –

移動導航覆蓋問題

回答

相關問題