Отрегулируйте высоту Twitter Загрузочный navbar только на мобильных телефонах

Question

Я изо всех сил пытаюсь настроить высоту навигационной панели для мобильных устройств на платформе Shopify. Я использую Bootstrap v2.1.0, если это имеет значение. Вот HTML для навигационной панели:

<div class="navbar{% if settings.inverse_color %} navbar-inverse{% endif %} navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <!-- COLLAPSE BUTTON --> 
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </a> 
       <div class="nav-collapse collapse"> 
       <!-- LOGO IN NAV BAR --> 
      {% if settings.logo_position == 'header' %} 
      {% if settings.use_logo_image %} 
       <a class="logo logo-header-image fl hidden-tablet hidden-phone" href="/" title="{{ shop.name }}"> 
        <img src="{{ 'header_logo.png' | asset_url }}" alt="{{ shop.name }} Logo"> 
       </a> 
      {% else %} 
       <a href="/" class="logo logo-header fl hidden-tablet hidden-phone" title="{{ shop.name }}">{{ shop.name }}</a> 
      {% endif %} 
      {% endif %} 
      <!-- MAIN NAVIGATION --> 
      <ul class="nav"> 
      {% for link in linklists.main-menu.links %} 
      {% capture child_list_handle %}{{ link.title | handle }}{% endcapture %} 
      {% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %} 
      <li class="dropdown{% if link.active %} active{% endif %}" id="menu{{ forloop.index }}" > 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#menu{{ forloop.index }}" title="View {{ link.title }}"> 
      {{ link.title }} 
      <b class="caret"></b> 
      </a> 

Я попытался решения здесь Decreasing height of bootstrap 3.0 navbar & Custom height Bootstrap's navbar, но не увенчались успехом.

Это то, что я пытался добавить в свой CSS под мобильный:

.navbar-nav > li > a { padding-top: 5px !important; padding-bottom: 5px !important; } 
.navbar .brand { padding-top: 5px !important; padding-bottom: 5px !important; } 
.navbar-inverse, .navbar-fixed-top, .navbar, .navbar-inner { min-height: 35px !important; } 

Спасибо заранее!

Answer 1

Помните, что bootstrap является мобильным - сначала, и вам нужно ссылаться на что-либо выше этого. Поэтому просто добавление .navbar {height: /* your height!important; */ должно сделать трюк. Возможно, вам нужно будет добавить @media (min-width :768px), чтобы изменить его оригинал, но не более.