CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Jason Smith
Jason Smith

Reputation: 57

how to change navbar color when nav-toggle is clicked

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

Upvotes: 2

Views: 4934

Answers (4)

χρηστος απατσιδης
χρηστος απατσιδης

Reputation: 241

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/

Upvotes: 1

Alaksandar Jesus Gene
Alaksandar Jesus Gene

Reputation: 6883

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.

Upvotes: 4

alberto-bottarini
alberto-bottarini

Reputation: 1231

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

Upvotes: 1

Ahs N
Ahs N

Reputation: 8366

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.

Upvotes: 1

Related Questions