Bootstrap Navbar Dropdown not always opening - html

Question

I'm having two issues with Bootstrap's navbar dropdown. First, the dropdown from the navbar is not working on each page. The look of the Navbar is shown below.
The Calendar is a Google calendar that is being embedded into the page. Whenever I click on the calendar link itself, the dropdown does not work. If I attempt to navigate to another page after clicking on the calendar page, the dropdown also does not work. However, if I navigate to another page and then reload the page, the dropdown works again. Any idea what may be causing this issue?
The second problem revolves around collapsing the navbar when the window size changes. The way I have it set, the entire navbar should collapse when the screensize is less than 1200 pixels, and clicking the collapsible should extend the navbar to a height of 85vh. While the navbar does collapse at 1200px, the collapsible does not extend to a height of 85vh until hitting the default of 767px. My code for this is shown below:
#media screen and (max-width: 1200px) {
.navbar-collapse .nav > .divider-vertical {
display: none;
}
#nav-portallinks {
li a {
color: white;
}
li a:hover {
color: black;
}
.divider {
width: 25vw;
margin-left: 0;
}
font: {
family: $font-text;
size: 2vw;
}
max-height: 85vh;
overflow: auto;
background-color: $cardinal;
width: 25vw;
margin-left: 50vw;
}
}
Any ideas?

Answer 1

In regards to unresponsive dropdown you are probably having some conflict between the calendar and bootstrap's behavior, maybe isolating the issue in a fiddle or sharing some of the code would help to identify it.
For bootstrap 3.3.x here is the CSS you need to toggle collapse on 1200px:
#media (max-width: 1200px) {
.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;
}
}
See working example
Another alternative would be to change the variable $grid-float-breakpoint: to $screen-lg-min !default; (which is 1200px) and recompile via SASS, default is 768px.