如何更改手機中的頂部導航背景顏色

想要在移動中查看時將導航的背景顏色更改爲黑色。然後希望將「菜單」文本更改爲白色，以便您可以看到文本。謝謝您的幫助。我無法找到正確的CSS選擇器來實現這一目標。如何更改手機中的頂部導航背景顏色

www.jobspark.ca

** * *修訂* ** * ** * ** * ***

@media all and (max-width: 640px) { 
.top-nav { 
background: #000 !important; 
color: #fff !important; 
} 
}

來源

2013-05-09 Chris S

這是我如何解決它：

@media (max-width: 640px) { 
    .mobile-nav .show-nav { 
     display: block; 
     padding: 1em 40px; 
     color: #fff; 
     background: #000; 
     cursor: pointer; 
     border-bottom: 1px solid #000; 
    } 
}

來源

2013-05-10 16:13:29

你可以定位在你的CSS通過媒體查詢具體視口寬度：

@media all and (max-width: 400px) { 
    .top-nav { 
    background-color: black; 
    color: white; 
    } 
}

這是使用CSS的唯一辦法，你不能針對特定設備（手機，平板電腦），而是針對該設備的某些特定屬性（在這種情況下，寬度或屏幕）。

您可以使用'媒體查詢'或'響應式設計'來搜索更深入的示例。

來源

2013-05-09 21:16:57 Galen

@media（最大寬度：640像素）{ .TOP-NAV { 背景：＃000重要; color：#fff！important;沒有似乎工作，但我認爲我們走在正確的軌道 } } – 2013-05-09 21:31:54

@ChrisS編輯，但只是一個例子，適合您的具體需求 – Galen 2013-05-09 21:38:34

我不知道爲什麼它不工作。我曾經玩過一段時間，但一無所獲。我把代碼放在 – 2013-05-09 22:36:15

您的第一個問題是，您的網頁上沒有任何元素，其類別爲.top-nav。你可能意思是.nav。然而，還有更多的問題不僅僅是背景顏色。您需要爲小型屏幕上的導航設置更多的樣式才能顯示。

在您的桌面瀏覽器（如Chrome）上，將瀏覽器向下拉並右鍵單擊菜單以檢查元素。您可以看到以該寬度應用於菜單的所有樣式，然後開始設置菜單的styes。

來源

2013-05-10 00:08:45

感謝您的關注。我能夠弄清楚樣式，只需要找出將標識插入導航的方式。我試圖擺脫+和切換標誌 – 2013-05-10 00:54:36

這應該解決的問題，但你應該注意到的是，屏幕的寬度應不超過940px。 940px確保它可以與幾乎任何移動設備配合使用。

@media only screen and (max-width: 940px) { 
    .top-nav { 
     background: #000 !important; 
     color: #fff !important; 
     } 
}

來源

2013-05-12 03:15:31 SaidbakR

如何更改手機中的頂部導航背景顏色

回答

相關問題