在导航栏中显示敏感菜单内的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（）功能，使我不保证我的语法是正确的。但希望你能获得要点。