導航菜單不按預期工作

-1

我有一個導航菜單圖標，我只想在小屏幕上顯示它（小於768px）。下面是代碼導航菜單不按預期工作

@media screen and(max-width:768px){ 
 
    .nav-menu{display:block;} 
 
} 
 
.nav-menu{ 
 
    display:none; 
 
}

<div class="nav-menu" id="nav"><h3>&#9776;</h3></div>

但是它不是小screen.What可見不對我提前code.Thanks。 UPDATE： 這裏JS FIDDLE

嘗試在'@ media'之前放置'display：none;'看起來像覆蓋@media規則 – WillardSolutions

您正在使用Bootstrap嗎？ – j08691

@ j08691 yups我使用bootstrap，但它不工作在簡單的js小提琴沒有bootstrap太。 –

最後我得到的回答有愚蠢的錯誤：

.nav-menu{ 
 
    display:none; 
 
} 
 
@media screen and (max-width:768px){ 
 
    .nav-menu{display:block;} 
 
}

<div class="nav-menu" id="nav"><h3>&#9776;</h3></div>

2017-02-13 18:05:39

你必須把這些規則周圍，否則，第二個將覆蓋第一：

.nav-menu{ 
    display:none; 
} 
@media screen and (max-width:768px){ 
    .nav-menu{display:block;} 
}

2017-02-13 18:03:50 Johannes

這裏和（最大寬度：768px）將創建錯誤 –

什麼錯誤？您是否嘗試在「and」和「（max-width ...」之間加上空格？ – Johannes

「和（max-width：768px）」會產生錯誤。應該是「and（max-width：768px）」。編輯它 –

回答