CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Héctor León
Héctor León

Reputation: 2400

Bootstrap NAV way to style color when is collapsed or expanded in mobile

I'm dealing with bootstrap to style the navbar Ok, i can style perfectly for desktop or mobile in his initial state.

The problem comes when i try to style on mobile in his expanded and collapsed state.

Here is a Codepen example, where you can see and example where i can touch the burguer and even the UL.

But, how can i change the logo color and the navbar background color ?? The others were easy because there got class via jQuery.

Hope someone can help me. ( Using CSS & JS ( with or without jQuery ) )

I try this but everything crashed 

$('.navbar-toggle').toggle(function () {
  $(".navbar-header").addClass("opened");
  $("#burguer").addClass("opened");
}, function () {
  $(".navbar-header").removeClass("opened");
  $("#burguer").removeClass("opened");
});

Upvotes: 0

Views: 789

Answers (1)

max
max

Reputation: 8667

You can use Bootstrap events on collapse:

JS:

$('#bs-example-navbar-collapse-1').on('show.bs.collapse', function () {
  $('.navbar').addClass('mobile-opened');
  $('.navbar-brand').addClass('mobile-opened');
});

$('#bs-example-navbar-collapse-1').on('hide.bs.collapse', function () {
  $('.navbar').removeClass('mobile-opened');
  $('.navbar-brand').removeClass('mobile-opened');
});

CSS:

.navbar.mobile-opened {
  background: blue;
}
.navbar-brand.mobile-opened span {
  color: red;
}

If you want to change colors when animation is done just use shown instead of show and hidden instead of hide

CODEPEN

Upvotes: 2

Related Questions