How to style and target mobile menu in bootstrap 4-CodePudding

<div >
<a href="#" >MENU</a>
<button type="button"  data-toggle="collapse" data-target="#navbarCollapse">
<span ></span>
</button>

<div  id="navbarCollapse" >
<div >
<a href="index.html" >Hjem</a>
<a href="#about" >Om</a>
<a href="#services" >Serviceydelser</a>
<a href="#testimonial"  hidden>Referencer</a>
<a href="terms.html" >Handelsbetingelser</a>
<a href="contact.html" >Kontakt</a>
<div  hidden>
<a href="#"  data-toggle="dropdown">Dropdown</a>
<div >
<a href="#" >Sub Item 1</a>
<a href="#" >Sub Item 2</a>
</div>
</div>

Is there a way to target styling of the mobile menu when data-toggle = collapse is active? I have already targeted:

$(".fixed-top a").not(".navbar-brand").not('.collapse.show > a').css("background-color", "green");

But the collapsed part dosen't work. Hope you will answer this question.

/ryokan

CodePudding user response：

You should use the below jQuery for toggle Class on Body and you can style your navigation menu as you wish. Use the "menu-open" parent class for opened navigation.

jQuery(".navbar-toggler").click(function(){
        jQuery("body").toggleClass("menu-open");
    });

CodePudding user response：

var orgBgColor = $("a").css("background-color");   
var stickyOffset = $('.navbar').offset().top;

$(window).scroll(function(){
    
var sticky = $('.navbar');    
var scroll = $(window).scrollTop();


if (scroll >= stickyOffset){ 
  sticky.addClass('fixed-top'); // make navbar sticky
$(".fixed-top a").not(".menu-open a").css("background-color", "green");
  $(".navbar-toggler").click(function(){

    $(".navbar").toggleClass("menu-open");
      
      $(".menu-open a").css("background-color", "#ffffff"); 
      
});

}
else {
  $(".fixed-top a").css("background-color", orgBgColor);
  sticky.removeClass('fixed-top');              // remover sticky from navbar.
}
});