Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3: Catch event when navbar is collapsed or expanded

Using Bootstrap 3:

Is it possible to catch when the navbar is collapsed/expanded?

I can't seam to find an event for this.

Edit:

I have a logo that is 90px heigh, so the navbar must be around 110px heigh.

To place the menu links close to the main content, I therefor have a margin-top at 60px. When it collapse, I want the three dashes (icon-bar) to have a margin-top of 60px also. When doing that, the menu suddently is 60px + 60px = 120px down - and that is 60px too much. So I want to catch when it's collapsed and then change margin-top of menu-links to 0px and when it's expanded I want to change it to 60px.

Here's a bootply sample:

http://www.bootply.com/120802

like image 349
MojoDK Avatar asked Mar 11 '14 07:03

MojoDK


Video Answer


1 Answers

Enable manually with:

$('.collapse').collapse()

Collapse Methods

.collapse("toggle") //Toggles the collapsible element   
.collapse("show")   //Shows the collapsible element 
.collapse("hide")   //Hides the collapsible element

Collapse Events

show.bs.collapse    //Occurs when the collapsible element is about to be shown
shown.bs.collapse   //Occurs when the collapsible element is fully shown (after CSS transitions have completed)
hide.bs.collapse    //Occurs when the collapsible element is about to be hidden
hidden.bs.collapse  //Occurs when the collapsible element is fully hidden (after CSS transitions have completed)

reference

like image 79
Bogdan Tushevskyi Avatar answered Oct 16 '22 13:10

Bogdan Tushevskyi