Er-c Er-c - 2 months ago 5
CSS Question

Color entire Bootstrap menubar when mobile (hamburger menu) is clicked

I've got a menubar that I want to add some CSS or JS to. I want to make it such that when I click on it when in responsive view, the entire object can be targeted (I plan to do some background styling). I've found some stack overflows re: coloring the menu items, the menu itself, but none of those when applied to the overall menubar either A) work at all B) work only for responsive, which is what I want.

I've made a codepen. I just can't figure out if things like

:active
or
:focus
or something else would be the right fit. Hopefully the code pen illustrates what I want. I just cannot seem to target the navbar in it's entirety whether thru JS or CSS. I want to achieve a background effect for not just the dropdown but the row the hamburger lives in when clicked.

Answer

You can use Bootstrap's collapse events.

$('.navbar-collapse').on('show.bs.collapse', function () {
  // Do your stuff
  // This event fires immediately when the show instance method is called.
});

$('.navbar-collapse').on('hide.bs.collapse', function () {
  // Do your stuff
  // This event is fired immediately when the hide method has been called.
});

CODEPEN

Comments