Fix navigation under Safari for iOS.

_testing.yml

@@ -7,4 +7,4 @@ gems:
 permalink: pretty
 paginate: 5
 paginate_path: about/news/page:num/
-url: http://127.0.0.1:4000
+url:

css/style.css

@@ -27,7 +27,7 @@ body {
   background: #87cefa;
   display: none;
 }
-@media (min-width: 767px) {
+@media (min-width: 768px) {
   .cw-header {
     display: block;
   }
@@ -258,7 +258,7 @@ body {
 .navbar-brand {
   margin-left: -15px;
 }
-@media (min-width: 767px) {
+@media (min-width: 768px) {
   .navbar-brand {
     display: none;
   }
@@ -340,11 +340,13 @@ html, body {
  * Bootstrap fixes
  */
 
-.dropdown:hover {
-  background: #e7e7e7;
-}
-.dropdown:hover > .dropdown-menu {
-  display: block;
+@media (min-width: 768px) {
+  .dropdown:hover {
+    background: #e7e7e7;
+  }
+  .dropdown:hover > .dropdown-menu {
+    display: block;
+  }
 }
 .nav > li > div {
   position: relative;
@@ -363,8 +365,8 @@ html, body {
 .navbar-collapse.collapse {
   display: none;
 }
-.navbar-collapse.in {
-  overflow-y: visible;
+.dropdown-open {
+  background: #e7e7e7;
 }
 
 

js/navbar.js

@@ -2,14 +2,10 @@ var navbar = document.getElementById('navbar'),
     toggle = document.getElementsByClassName('navbar-toggle')[0],
 	collapse = document.getElementsByClassName('navbar-collapse')[0];
 
-document.addEventListener('scroll', switchScroll, false);
-window.addEventListener('resize', switchScroll, false);
-toggle.addEventListener('click', toggleMenu, false);
-
 switchScroll();
 
 function switchScroll() {
-    if (window.scrollY > 185 && document.body.clientWidth > 767) {
+    if (window.scrollY > 185 && document.body.clientWidth >= 768) {
         navbar.classList.remove('navbar-static-top');
         navbar.classList.add('navbar-fixed-top');
     } else {
@@ -21,4 +17,39 @@ function switchScroll() {
 function toggleMenu() {
 	collapse.classList.toggle('collapse');
 	collapse.classList.toggle('in');
-}
+}
+
+var dropdowns = document.getElementsByClassName('dropdown');
+
+function closeMenus() {
+    for (var j = 0; j < dropdowns.length; j++) {
+        dropdowns[j].getElementsByClassName('dropdown-toggle')[0].classList.remove('dropdown-open');
+        dropdowns[j].classList.remove('open');
+    }
+}
+
+for (var i = 0; i < dropdowns.length; i++) {
+    dropdowns[i].addEventListener('click', function() {
+        if (document.body.clientWidth < 768) {
+            var open = this.classList.contains('open');
+            closeMenus();
+            if (!open) {
+                this.getElementsByClassName('dropdown-toggle')[0].classList.toggle('dropdown-open');
+                this.classList.toggle('open');
+            }
+        }
+    });
+}
+
+function closeMenusOnResize() {
+    if (document.body.clientWidth >= 768) {
+        closeMenus();
+        collapse.classList.add('collapse');
+	    collapse.classList.remove('in');
+    }
+}
+
+document.addEventListener('scroll', switchScroll, false);
+window.addEventListener('resize', switchScroll, false);
+window.addEventListener('resize', closeMenusOnResize, false);
+toggle.addEventListener('click', toggleMenu, false);