Navbar не реагирует на iPad, что делать?

Question

Я пытаюсь выяснить, как сделать navbar на моем сайте http://lundinskatt.se, чтобы изменить размер на iPad Mini так же, как на маленьком экране, таком как Google Nexus 7. Теперь он показывает, что все меню «прыгает», вниз и позиционирует себя под логотипом. Я просто хочу, чтобы он был отзывчивым, как на небольших экранах.

Я уверен, что это легкое исправление, но мой мозг сегодня не работает со мной, поэтому я должен спросить любого из вас, если вы знаете, что я должен делать?

С наилучшими пожеланиями Эвелина

Answer 1

По вашему CSS у вас есть

<div class="container-fluid" id="fav-nav-sm"> 
       <div class="row-fluid"> 
        <div id="fav-nav" class="span12"> 
         <div class="navigation"> 
          <div class="moduletable_menu"><ul class="nav menu"> 
<li class="item-101 current active"><a href="/">Hem</a></li><li class="item-107"><a href="/verksamhetsomraden">Verksamhetsområden</a></li><li class="item-108"><a href="/abonnemang">Abonnemang</a></li><li class="item-110"><a href="/nyheter">Nyheter</a></li><li class="item-109"><a href="/kontakt">Kontakt</a></li></ul> 
</div> 
         </div> 
        </div> 
       </div> 
      </div> 

Это для средних экранов -Потому, если вы посмотрите на CSS

@media (min-width: 768px) and (max-width: 1199px) { 

    #fav-nav-sm { 
     border-bottom: 1px solid #ddd; 
    } 
    #fav-header #fav-nav { 
    display: none; 
    } 
    #fav-nav-sm #fav-nav { 
    padding: 7px 0px 16px; 
    float: none; 
    } 
    #fav-nav-sm .moduletable ul.nav.menu { 
    float: none; 
    } 
    #fav-nav-sm .navigation { 
    display: table; 
    margin: 0 auto; 
    } 
    #fav-nav-sm .navigation .nav-pills { 
    margin-top: 0; 
    } 

} 

Все эти свойства вы устанавливаете это меню между вышеупомянутыми точками останова.

С вашего вопроса вы хотите иметь либо разметку рабочего стола меню, либо мобильную компоновку (не нужны средние экраны - удалите разметку в html и соответствующий стиль из css также сохранит ваш код).

Теперь, когда это меню ушло, вы хотите показать меню гамбургера поверх логотипа.

изменить запрос на линии 402 и 1085 на этот запрос

@media (max-width: 1199px) { 

}