在導航欄中顯示敏感菜單內的div

Question

我使用Bootstrap從頭開始創建WordPress主題。我現在正在製作菜單，到目前爲止它一直很順利。我爲頂部小部件創建了一個右對齊的div，以顯示例如語言標誌。我已經移除了摺疊類，因此小部件總是顯示在菜單中。問題是，如果你在一個較小的屏幕上，我想把小部件放在菜單中，所以用戶必須點擊菜單按鈕才能看到菜單和小部件。有什麼建議麼？

這裏是我的代碼：

Answer 1

我建議你使用JavaScript來克隆小部件並將它添加到您的菜單，然後用CSS來顯示/隱藏它合適的屏幕尺寸。

謹防重複的編號爲<nav id="navbar"。最好做出正確的一個<nav id="navbar-right"。

Javacript：

$(document).ready(function() { 
    $('#navbar-right .top-widget') 
    .clone() 
    .appendTo($('#navbar')) 
    .attr('id', 'widget-within-navbar'); 
}): 

CSS：

#widget-within-navbar{ display: block } 
@media (min-width: 768px) { 
    #widget-within-navbar { display: none } 
} 

免責聲明：這已經有一段時間，因爲我用jQuery的的clone（）和appendTo（）功能，使我不保證我的語法是正確的。但希望你能獲得要點。