I am working on this demo. How can I correct the code to add margin to the the .collapse only on small screens?

As you can see I have a custom height navbar with height of 100px but bootstrap still displaying the .collapse on top of 50px (approximately)! I tried to add

.navbar-inverse .navbar-collapse{
  margin-top: 50px;
}

it didn't work but when I add !important to the rule it works

.navbar-inverse .navbar-collapse{
 margin-top: 50px !important;
}

However, this also adding unwanted margin to collapse class in big screen because of !important usage. How can I fix this?