2

I need help changing my bootstrap navbar color when navbar-toggle is clicked. it just wont work.

$( ".navbar-toggle" ).click(function() {
$( ".navbar" ).css( "background","yellow" );
})
Siguza
  • 21,155
  • 6
  • 52
  • 89
Jason Smith
  • 57
  • 1
  • 7

4 Answers4

4

Here is the jsFiddle

$(".navbar-toggle").click(function(){
$("nav").toggleClass("navbar-yellow");
})

Create this class in css

.navbar-yellow{

    background-color: yellow !important;
}

Its navbar-default that is giving the gray color.

Alaksandar Jesus Gene
  • 6,523
  • 12
  • 52
  • 83
1

Change this:

$( ".navbar" ).css( "background","yellow");

to this:

$( ".navbar" ).css( "background","yellow !important");

Bootstrap default navbar css is probably overwriting the one you are adding. Use !important to overwrite it.

Ahs N
  • 8,233
  • 1
  • 28
  • 33
  • strange..still nothing. – Jason Smith Jul 28 '15 at 10:37
  • Won't work. "*When using .css() as a setter, jQuery modifies the element's style property.*", [source](http://api.jquery.com/css/). Inline styles overrule all other styles in separate stylesheets (unless the `!important` rule is used in the stylesheet). – GreyRoofPigeon Jul 28 '15 at 10:56
1

You should create a custom css class and add it when user interact with your UI.

//into your css file
.navbar.activated {
   background: yellow;
}


//into your js file
$( ".navbar-toggle" ).click(function() {
  $( ".navbar" ).addClass( "activated" );
});
alberto-bottarini
  • 1,213
  • 9
  • 21
1

bootstrap 3

$(".navbar-toggle").click(function(event, c){
    $(event.target).addClass("disabled");
        $("nav").toggleClass("navbar-yellow");
    setTimeout(()=>{
        $(event.target).removeClass("disabled");
    },500);
})

Or for bootstrap 4 and 5

$(".navbar-toggler").click(function(event, c){
    $(event.target).addClass("disabled");
        $("nav").toggleClass("navbar-yellow");
    setTimeout(()=>{
        $(event.target).removeClass("disabled");
    },500);
})

CSS

.navbar-yellow {
  background-color: yellow !important;
}
.disabled {
  pointer-events: none;
}

http://jsfiddle.net/rdx7j5a9/34/

χρηστος απατσιδης
  • 231
  • 3
  • 7