I'm looking to keep my navbar fixed at the top of the page and have it push down content when I toggle the collapse menu, similar to how it behaves in static or regular navbars.
I recently had a similar need and found a solution using the following jquery code snippets.
/* jQuery code to adjust content for fixed Bootstrap navbars on mobile displays
* Replace 400px with your preferred value throughout
*/
jQuery(function($){
$("#navbar-collapse li.expanded.active.dropdown").on("click",function(){
if($("button.navbar-toggle").attr("aria-expanded") == "true")
$(this).trigger("data-attribute-changed");
});
$("#navbar-collapse li.expanded.active.dropdown").on("data-attribute-changed",function(){
if(!$(this).hasClass("open")){
var dropdown_height=$(this).children(".dropdown-menu").height();
var navbar_collapse_margin = parseInt($("#navbar-collapse").css("margin-top")) + dropdown_height;
navbar_collapse_margin = navbar_collapse_margin + "px";
$("#navbar-collapse").css("margin-top",navbar_collapse_margin);
}
else{
$("#navbar-collapse").css("margin-top","400px");
}
});
$(window).on("resize",function(){
if($("button.navbar-toggle").attr("aria-expanded") == "true")
$("#navbar-collapse").css("margin-top","0px"); // Reset margin on resize
});
$("button.navbar-toggle").on("click",function(){
if($("button.navbar-toggle").attr("aria-expanded") == "true")
$("#navbar-collapse").css("margin-top","0px"); // Dealing with regular displays
else
$("#navbar-collapse").css("margin-top","400px");
});
});