0

I have a Bootstrap 3 nav-pills menu which collapses on mobile devices however when you click the navbar-toggle menu, the menu opens and then immediately jumps up about 40-50 pixels?

It doesn't open at all on iPhone. :(

It's here: http://www.portpatrick.me.uk/rickwood/hotel-rooms-portpatrick.php

Have double checked the CSS and I can't see, wood for the trees maybe, why it's doing this. Hope someone can help point out the obvious.

Thank you. NJ

Menu..

<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>

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

I will endeavour to learn how to do a jsfiddle or github or whatever it's called. Thank you. NJ

NathonJones
  • 919
  • 4
  • 13
  • 28

1 Answers1

0

On your styles.css file (currently line 158) there is this line that is including a line-height.

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

Remove the height: 60px; and the menu doesn't jump anymore. I tested on an iPhone Emulator and it worked fine. I do not own an iPhone (gasp!) so I cannot test on an actual device.

crazymatt
  • 3,266
  • 1
  • 25
  • 41
  • I don't see "line-height" in that section. I've removed "height" though, as suggested, but it hasn't resolved the problem and now, in IE, the caret for the Activities button, in desktop view, is sat below the button! The menu still jumps in mobile view and still doesn't open at all on iPhone 5s. – NathonJones Apr 22 '15 at 07:41
  • Have tried creating a Bootply example of this but when I test it, it is immediately different to what's displayed on my site despite it being a cut and paste of the HTML and CSS!? http://www.bootply.com/IuzArsMAuG – NathonJones Apr 22 '15 at 07:52
  • Changed the height of navbar-header .navbar-header {height: 0;} and that has resolved the jump up. Toggle menu was taking the navbar-header height into consideration, loading the menu and then it would jump up because .navbar-header, whilst specified in height, isn't visible on the page. Problem now is my toggle menu opens at 90% width and then jumps right. Bootply example and also, when I set font-size to anything over 18px, the carets jump below the buttons (in IE mostly). Can that be prevented or is it just simply a lack of space in the menu? http://www.bootply.com/ZanQBWTECu – NathonJones Apr 22 '15 at 08:40