Bootstrap Issues with Mobile Navs

All, I’m working on a personal project of mine, and I seem to be having a bit of an issue with the bootstrap nav menu. It was working all well and good prior to trying to integrate a breakpoint override for the nav menu collapses.

It seems as if the working solutions on SO, aren’t quite up to snuff, such as this answer and associated Bootply:

I’ve isolated the problem to the following:

      display: none!important

Can someone please explain to me why that deleting the above doesn’t fix the collapse issue and offer suggestions on how to fix it?



Edit: I had to add
      display: block!important

to the Sass due to the nature of the js controlling the nav, the degree of specificity was such that the CSS defaulted to display none at all times.