navbarのdivを応答メニュー内に表示する

Question

私は、WordPressテーマをブートストラップを使ってゼロから作成しています。私は今メニューを作っているし、今のところ滑らかになっている。私は、上部のウィジェットのための右揃えのdivを作成して、例の言語フラグを表示しています。ウィジェットが常にメニューに表示されるように、折りたたみクラスを削除しました。問題は、小さな画面では、メニュー内にウィジェットを配置したいので、メニューとウィジェットを表示するにはメニューボタンをクリックしなければならないということです。助言がありますか？ここで

は私のコードです：

Answer 1

私はあなたがウィジェットのクローンを作成し、あなたのメニューに追加し、その後、適切な画面サイズのためにそれを隠す/表示するためにCSSを使用するためにはJavaScriptを使用してお勧めします。

重複ID <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のクローン（）とappendTo（）の機能を使用するのでそれはしばらくしています私は構文が正しいことを保証するものではありません。しかし、うまくいけば、あなたは要点を得る。