Changing navbar breakpoints

Hi

I am looking to stop my navbar from going to two lines at 991px screen size and having it switch to mobile nav at that point… I just cant get it to switch… I have used the following media query but nothing happens and I saw a working example work with this query. When I inspect my code at breakpoint I see bootstrap.less I dont know how to create this file or where to place it in the child theme folder or if I even need it. My website is valleylanes.net/ybc/ any help you can offer would be great, I am at a loss…

@media (max-width: 991px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}

UPDATE

I have the resize working but now the collapse nav is broken when collapsed the nav extends beyond the bottom of container see attached image

Hello there,

I hope you are doing well today.

The CSS that you added may be affecting the mobile menu, so you try temporarily removing it to see if that helps the menu.

Best Regards,
Support