title: Bootstrap navbar media query
body: <p>I have my dropdown menu styled for smaller devices/screen sizes by a media query, when the navbar is in uts full screen mode i have dropdown menus and some sub dropdown menus. This all works fine when in full screen mode, however when i am navigating through the navbar in a smaller device/screen size the sub dropdown menus do not appear? Does anyone know what im missing to enable these to appear.</p>
  
  <p>Bootstrap overide and media query</p>
  
  <pre><code>       /* Media Queries */
  
         @media (max-width: 1024px) {
         .nav li { width: 100%; }
         .nav .dropdown ul {display:none; }
         .nav .open ul { display: block; }
  
        .nav-collapse .nav &gt; li &gt; a, .nav-collapse .dropdown-menu a {
         text-align: center;
         background-color:#211256;
         }
  
  
  
       .nav-collapse .nav &gt; li &gt; a:hover,
       .nav-collapse .dropdown-menu a:hover {
       background-color: #211256;
        color:white;
  
         }
  
       .navbar .nav &gt; li  a:hover{
        color:white;
      }
  
       .navbar .nav .active &gt; a, .navbar .nav .active &gt; a:hover {
       background: #211256;
        color: white;
       text-decoration: none;
      }
  
     .nav-collapse .nav &gt; li &gt; a, .nav-collapse .dropdown-menu a {
     border-radius: 3px 3px 3px 3px;
     color: white;
      font-weight: bold;
      padding: 6px 15px;
      margin-bottom:2px;
  
     }
  
   .navbar .nav li.dropdown .dropdown-toggle .caret, .navbar .nav li.dropdown.open .caret {
    border-bottom-color: white;
    border-top-color: white;
    }
  
  
    .navbar .nav li.dropdown.open &gt; .dropdown-toggle, .navbar .nav li.dropdown.active  &gt;  .dropdown-toggle, .navbar .nav li.dropdown.open.active &gt; .dropdown-toggle {
    background-color: transparent;
    color: #211256;
     }
     }
  </code></pre>
  
  <p>The site is at</p>
  
  <pre><code>   www.newbridges.co.uk
  </code></pre>
  
  <p>If anyone can shed some light on this that would be great</p>
  
  <p>Thanks</p>