Working on a project with Bootstrap 3.3.2, my aim was to keep the nav menu always collapsible, similar to its mobile view. To achieve this, I visited bootstrap.com/customize and adjusted the @grid-float-breakpoint: to 99999999px;, an overly large value ensuring the navbar never expands. Everything seemed to work well across browsers except for Safari, where the dropdown icon disappeared despite the header image showing up.
Upon inspecting the CSS of the drop-down icon in Safari, I found:
@media (min-width: 99999999px;){
.navbar-toggle {
display: none;
}
}
It appeared that Safari might be incorrectly interpreting the viewport as larger than 99999999px. Though the simple fix would be to change the code to display: inline;, this would remove the .navbar-toggle from the grid system, impacting responsiveness.
Any suggestions for a solution or insight into this potential bug issue would be greatly appreciated. I've already looked into problems related to @grid-float-breakpoint but haven't found much other than previous issues with Chrome that have been resolved.
Thanks!