Bootstrap 3 navbar-тумблер прыгает на открытом и вообще не открывается на iPhone?

Question

У меня есть меню навигационных таблеток Bootstrap 3, которое рушится на мобильных устройствах, однако, когда вы щелкаете меню переключателей навигационной панели, меню открывается, а затем сразу же поднимается примерно на 40-50 пикселей?

Это не открывается вообще на iPhone.:(

Это здесь: http://www.portpatrick.me.uk/rickwood/hotel-rooms-portpatrick.php

Дважды проверил CSS, и я не вижу дерева для деревьев, может быть, почему он это делает. Надеюсь, кто-то может помочь указать на очевидное.

Спасибо. Нью-Джерси

Меню..

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#rickwoodcollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>

<div class="collapse navbar-collapse" id="rickwoodcollapse">
<ul class="nav nav-pills nav-justified">
<li role="presentation"><a href="index.php" id="home">Home</a></li>
<li role="presentation"><a href="hotel-rooms-portpatrick.php" id="rooms">Rooms</a></li>
<li role="presentation"><a href="dinner-breakfast-dining.php" id="dining">Dining</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false" id="attractions">Attractions <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="beaches-coast-portpatrick.php">Beaches &amp; Coast</a></li>
<li><a href="public-gardens-scotland.php">Gardens</a></li>
<li><a href="mull-of-galloway.php">Mull of Galloway</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false" id="activities">Activities <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="walking-portpatrick-scotland.php">Walking</a>
<li><a href="walking-in-portpatrick.php">Walking in Portpatrick</a></li>
<li><a href="walking-dumfries-galloway.php">Further Afield</a></li>
<li><a href="Mull-of-Galloway-Trail.php">Mull of Galloway Trail</a></li>
<li><a href="golf-courses-wigtownshire.php">Golf Courses</a></li>
<li><a href="cycling-portpatrick-scotland.php">Cycling</a></li>
</ul>                    
</li>
<li role="presentation"><a href="portpatrick-scotland.php">Location</a></li>
<li role="presentation"><a href="news-events-portpatrick.php">News</a></li>
<li role="presentation"><a href="contact.php">Contact</a></li>
</ul>
</div>

CSS... http://www.portpatrick.me.uk/rickwood/styles.css

Я постараюсь научиться делать jsfiddle или github или как там это называется. Спасибо. Нью-Джерси

Answer 1

На ваше styles.css файл (в настоящее время строка 158) есть эта строка, которая включает в себя line-height,

.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
  height: 60px;
  background-color: #14214D;
}

Удалить height: 60px; и меню больше не прыгает. Я тестировал на эмуляторе iPhone, и он работал нормально. У меня нет iPhone (задыхаясь!), Поэтому я не могу проверить на реальном устройстве.