Solution 1 :

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");
    });

Solution 2 :

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.
}
});

Problem :

<div class="navbar navbar-expand-lg bg-light navbar-light">
<a href="#" class="navbar-brand">MENU</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse justify-content-between" id="navbarCollapse" >
<div class="navbar-nav ml-auto">
<a href="index.html" class="nav-item nav-link active">Hjem</a>
<a href="#about" class="nav-item nav-link">Om</a>
<a href="#services" class="nav-item nav-link">Serviceydelser</a>
<a href="#testimonial" class="nav-item nav-link" hidden>Referencer</a>
<a href="terms.html" class="nav-item nav-link">Handelsbetingelser</a>
<a href="contact.html" class="nav-item nav-link">Kontakt</a>
<div class="nav-item dropdown" hidden>
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Sub Item 1</a>
<a href="#" class="dropdown-item">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

Comments

Comment posted by ryokan

I still need the $(“.fixed-top a”) for the sticky top menu. But your code helped me stove it. Thank you.

Comment posted by ryokan

I ment solve it. 🙂

By