title: Unable to Collapse Navigation in Bootstrap 3 Website on iPad
body: <p>For the life of me I cannot figure out how to collapse the navigation of my Bootstrap 3 website on my iPad. The website is <a href="http://allisonbrandonwexler.com" rel="nofollow noreferrer">allisonbrandonwexler.com.</a></p>
  
  <p>Based on some research, I figured this is the code that needs changed in my theme's .css file, but nothing I do works:</p>
  
  <pre><code>@media (min-width: 768px) {
    .navbar-custom {
      padding: 20px 0;
      border-bottom: none;
      letter-spacing: 1px;
      background: transparent;
      -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
      -moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
      transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
    }
  
    .navbar-custom.top-nav-collapse {
      padding: 0;
      background: black;
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }
  }
  </code></pre>
  
  <p>And honestly, although the navigation collapses on my iPhone X in landscape mode as I want it to, I'm not even sure why that works given the pixel width of the iPhone X (when in landscape) is obviously more than 768px.</p>
  
  <p>My site's CSS file can be found here: <a href="https://github.com/brandonwexler/brandonwexler.github.io/tree/master/css" rel="nofollow noreferrer">https://github.com/brandonwexler/brandonwexler.github.io/tree/master/css</a></p>
  
  <p>...and the bootstrap.css file can be found here: <a href="https://github.com/brandonwexler/brandonwexler.github.io/tree/master/vendor/bootstrap/css" rel="nofollow noreferrer">https://github.com/brandonwexler/brandonwexler.github.io/tree/master/vendor/bootstrap/css</a></p>
  
  <p>Any help would be GREATLY appreciated!</p>