Bootstrap - Can't click dropdown child menu items on mobile and first click not triggering nav-collapse

Question

I've run into two issues with dropdown menu items on mobile devices. Specifically:

1. My nav-collapse isn't shown on the first click of btn-navbar, but only on an iPhone.
2. While I can toggle dropdowns, I can't click on any dropdown-menu items on mobile devices.

My page is valid on W3 Validator and I have added both the .nav-collapse and .collapse classes to my navbar. Plus everything works fine when resizing the browser window on my laptop.

You can see the live web page here: http://hartmandashboard.com/

Has anyone seen this problem before? Anyone care to offer a potential fix? I'd appreciate any help.

Thanks

Answer 1

Yes, I've seen this before and I saw the issue is on github as well. I don't remember exactly where I found this, but some guy was saying that it was an issue about setting those elements to position: absolute; and that re setting them to static would fix it.

So why don't you go ahead and try this on your custom CSS:

CSS

.dropdown-backdrop {
  position: static;
}

Let me know if we're on the same page and this solved your issue.