如何在移動設備上查看時隱藏我的菜單？

Question

我的網站是http://sitandwonder.com.au使用woocommerce在wordpress中構建的。

我不喜歡我的菜單在當前的移動設備上顯示當前主題的方式。

我發現了一種使用插件添加響應式菜單的方式，但是會發生什麼情況是最終會出現2個菜單。有沒有一種方法可以輸入一些自定義CSS來隱藏我的舊菜單而不隱藏新的插件菜單？

Answer 1

假設你有以下菜單：

nav{ 
 
    width: 80vw; 
 
    height: 40px; 
 
    background: rgb(43,43,43); 
 
    color: #FFFFFF; 
 
    margin: 0 auto; 
 
} 
 

 
nav ul li{ 
 
    display: inline; 
 
} 
 

 
@media screen and (max-width: 678px){ 
 
    nav{ 
 
    display: none; 
 
    } 
 
}

<nav> 
 
    <ul> 
 
    <li>option 1</li> 
 
    <li>option 2</li> 
 
    <li>option 3</li> 
 
    </ul> 
 
</nav>

添加CSS規則@media將允許您檢測和應用樣式取決於屏幕方向：landscape,portrait，無論是其handheld設備，或只需通過確定屏幕寬度：min-width,max-width，這些稱爲media queries。

PS

其重要的你要添加您認爲相關的找到一個解決問題的方法你的代碼的一部分，但我asume你是新來的StackOverflow所以，希望你不會得到投票並希望這有助於。

Answer 2

假設你有以下菜單：

nav{ 
 
    width: 80vw; 
 
    height: 40px; 
 
    background: rgb(43,43,43); 
 
    color: #FFFFFF; 
 
    margin: 0 auto; 
 
} 
 

 
nav ul li{ 
 
    display: inline; 
 
} 
 

 
@media screen and (max-width: 678px){ 
 
    nav{ 
 
    display: none; 
 
    } 
 
}

<nav> 
 
    <ul> 
 
    <li>option 1</li> 
 
    <li>option 2</li> 
 
    <li>option 3</li> 
 
    </ul> 
 
</nav>

添加CSS規則@media將允許您檢測和應用樣式取決於屏幕方向：landscape,portrait，無論是其handheld設備，或只需通過確定屏幕寬度：min-width,max-width，這些稱爲media queries。

PS

其重要的你要添加您認爲相關的找到一個解決問題的方法你的代碼的一部分，但我asume你是新來的StackOverflow所以，希望你不會得到投票並希望這有助於。

，請確保運行在全屏模式下的代碼片段，否則什麼也不會顯示...

Answer 3

還有就是要檢查，如果當前設備的功能是在WordPress

<?php if(is_mobile(){ 
    load_your_mobile_menu(); 
}else{ 
    load_your_desktop_menu(); 
}?> 

移動

/*用你手機和桌面上各自的菜單替換load_your_mobile_menu（）和load_your_desktop_menu（）*/

Answer 4

把它放到你的style.css中

@media only screen and (max-width: 1024px) { 
div#responsive-menu-container, 
button#responsive-menu-button, 
header#header { 
    display: none !important; 
} 
} 

安裝這個插件WDES Responsive Mobile Menu

下方添加或身體標記此代碼後。通常這可以在模板的header.php中找到。

<?php wdes_rmm_mobile_responsive_menu(); ?> 

問題解決。