When using an iPhone 6+ in landscape mode with tabs open on Mobile Safari running iOS 8, the Bootstrap navbar-fixed-top may experience difficulty in

Encountered an issue with Bootstraps navbar-fixed-top on iPhone 6+ in landscape mode on iOS 8 when multiple tabs are open.

To replicate the bug:
1) Visit http://getbootstrap.com/examples/navbar-fixed-top/ on iPhone 6+ in landscape mode with another tab open
2) Scroll down the page without expanding the collapse menu
3) Once Safari's status bar disappears, expand the navbar
4) Scroll back up until Safari's status bar reappears
5) Try to close the navbar.

This issue was present in iOS 7 but could be resolved by adding the viewport minimal-ui meta tag. Testing on iPhone 6+ and simulator running iOS 8 indicates that the bug is related to the tabs showing on the status bar. It seems this problem extends beyond Bootstrap and affects any fixed element at the top.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="to-sticky navbar-fixed-top">
  <div class="nav-container">
    <div class="navbar">
      <div class="navbar-header">
        <a type="button" class="navbar-toggle btn-secondary btn" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      Main Menu
    </a>
      </div>

No workaround has been found yet. Any suggestions?

htmlcsstwitter-bootstrapmobilemobile-safari

Answer №1

It seems that this issue occurs when the landscape tabs are open, resulting in the inability to open or close the mobile menu.

I was able to resolve this issue using a workaround:

  1. Create an absolute positioned div (with id #ios_menu_fix in this case) that is about the size of the toggle button.
  2. In the CSS, align it where the toggle button would be in the fixed navigation menu. Make sure to set its z-index and include -webkit-transform: translate3d(0,0,0); to address the iOS z-index problem when scrolling up.

  3. Whenever the page is scrolled, adjust the top position based on the scroll height like this:

    $(window).on('scroll',function() {
$("#ios_menu_fix").css("top", $(document).scrollTop()+"px");
});

  4. To open or close the menu, simply click on #ios_menu_fix 

    $(".nav-collapse").collapse('hide');
$(".nav-collapse").collapse('show');

You can verify if the menu is open by checking:

var toggle = $(".nav-collapse").is(":visible");
if (toggle) {
$(".nav-collapse").collapse('hide');
}
else {
$(".nav-collapse").collapse('show');
}

Although not ideal, this solution currently works without causing issues in other mobile browsers or layouts.

The code examples provided utilize JQuery.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having difficulty retrieving the selected element with Select2 jQuery

Currently developing an HTML5 template known as Londinium - responsive bootstrap 3 admin template In my dropdown menu, I have three items. When the user clicks on Owned, I am trying to display the hidden div cown, but it is not showing up. The drop-down ...

jquerycsstwitter-bootstrap

Tips for showing an Object with nested Objects in Vue.js

Looking for guidance on displaying a JSON object in Vue.js with the following structure: { "1": [ "15-16", "16-17", "17-18", "18-19" ], "2": [ & ...

javascripthtmljsonvue.jslistview

Modify the appearance of a Javascript file that is parsing data from a text file

I am working on an HTML project where I have a JavaScript file that reads from a text file. Currently, the text from the file is displaying in my HTML file, but I would like to style it using CSS. Can anyone provide guidance on how to achieve this? I am st ...

javascripthtmlcss

What is the significance of the space between form.validate and .ng-invalid-email.ng-dirty?

I'm currently working on an AngularJS application and I'm confused about the spacing between "form.validate" and ".ng-invalid-email.ng-dirty" in the stylesheet code below: <style> form.validate .ng-invalid-required.ng-dirty {background ...

cssangularjs

Inserting jQuery into a Div container

I am attempting to execute a jQuery function within a dynamically generated div (subpage) through JavaScript. I'm relatively new to this, so please bear with me. Within the index.html file, I am filling a div using a JavaScript load command. <ul& ...

htmljquery

Difficulty with Line Breaks in Spans

I've noticed that my multi-line address in the footer is not breaking correctly at certain screen widths. Each line of the address is enclosed within a <span> tag with a specific class and then styled either as block or inline-block in the CSS ...

htmlcss

Looking to spice up your static HTML site? Dive into the world of Ruby on

I recently developed an app that features a static HTML webpage containing text and images, and now I'm interested in incorporating Ruby on Rails to explore its capabilities further. After creating a basic RoR application, I copied the HTML content f ...

javascripthtmlruby-on-railsruby

Border only at the bottom of the outline

I need help creating a bottom outline border when the cursor hovers over an image. I prefer to use this inner border style to avoid any layout issues with a traditional border-bottom. Below is my current code, which includes outline margins: .img-lightbox ...

htmlcssborderoutline

Extracting information from the 'View all responses' feature

I've been attempting to extract reviews from the following website: . Each review contains 5 ratings such as value for money and customer service. However, most of the information is initially hidden behind a 'See all Answers' button, restri ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

Loading asp.net controls dynamically using JavaScript

In the process of creating ASP.NET controls that facilitate the development of dynamically generated websites based on a class.cs file, these controls are loaded into a Placeholder within an update panel. My goal is to leverage technologies like AJAX and ...

asp.netajaxjsonhtmlc#-4.0

Is there a way to track and detect alterations to an element using JavaScript or jQuery

Can I detect the addition of a specific CSS class to an element without having to create a new event? ...

javascriptjqueryhtml

Using CSS to style the footer with a body height set to 100%

I am currently working on an angularJS web app with a basic template structure: <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body id="top"> <!-- Templates with vi ...

htmlcssangularjs

What is the best way to include multiple tags (specifically for articles) in the Facebook Open Graph?

When it comes to a single blog or article with multiple tags, how can you add Facebook Open Graph data? This method seems like the most logical way to do it. However, the Facebook debugger reports that it's incorrect: <meta property = "article: ...

htmlfacebook-opengraphrdfa

What is the best way to link and store invoice formset with the main form foreign key in Django?

I am new to Django and need help. I am trying to save my invoice in a database, but the issue I'm facing is that I can't retrieve the foreign key from the main form when I try to save the formset. View.py def createInvoice(request):` if requ ...

javascriptpythonhtmldjango

Transform the header style columns of react-js Material-tables into rows

Currently experimenting with gradient designs on a material table. While I am able to apply the right color combination to the rows, I seem to be getting column-based results on the title of the table. Attached is a screenshot of my output for reference. ...

javascripthtmlcssreactjsmaterial-ui

Swap out the variables in your function with the values selected from the dropdown menu

I've recently started delving into writing JS functions and I'm facing a challenge with the following scenario: On an HTML page, I want to change a variable within a lodash function based on the value of a dropdown and display the result in a HT ...

javascripthtmlarraysjsonlodash

Changing the color of text in one div by hovering over a child div will not affect the

When hovering over the child div with class .box-container, the color of another child div with class .carousel-buttons does not change. .carousel-slide { position: relative; width: inherit; .carousel-buttons { position: absolute; z-index: ...

htmlcsssass

Is there a way to add Internet Explorer specific stylesheets to the Wordpress functions directory using enqueue?

I'm facing challenges setting up my Wordpress theme to be compatible with early versions of Internet Explorer. Most online tutorials have advised me to enqueue specific I.E stylesheets in the header, but this method has not been successful for me. Add ...

phpcsswordpress

Top tip: Utilize jQuery for the most effective method of adding content to the HTML of a paragraph situated

One interesting challenge I'm facing involves a textarea that stores dynamic HTML content within paragraph (p) tags. Initial HTML: <textarea rows='7' class='form-control' id='comments'><p>My variable HTM ...

javascriptjqueryhtmlreplaceparagraph

Tips for effectively managing JSON data in my application

I'm working on a project to create a website that monitors the number of coronavirus cases in my country. The data is organized and stored in a file called cases.json using the following structure: { day: { city: { cases: 1 } ...

htmljson