Navbar dropdown not working on mobile devices

Question

I've run into an issue with the navbar in Bootstrap 3. One of my menu items is a dropdown, which works fine on my laptop, but doesn't work on my android phone. Specifically nothing happens when pressing on the dropdown menu item on my phone.

I've searched google, this site, and several others for a solution, but have yet to find one. There seems to be a few solutions/workarounds for Bootstrap 2, but none of them seem to work for me. I know there are some differences between version 2 and 3, which may be why none of the solutions I tried worked.

Any suggestions or references I can look at would be greatly appreciated! I'm including the code from my navbar.php file below. To give an idea of my setup, I have a header.php and footer.php files as well. Each of the pages on my site include the header, navbar, and footer files. Please let me know if any additional information may be helpful.

    <nav id="navbar" class="navbar navar-default navbar-inverse navbar-fixed-top" role = "naviation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbarCollapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="http://luckyrabbitdesigns.com/index.php">Lucky Rabbit Designs</a>
    </div>
    <div class="collapse navbar-collapse navbarCollapse">
        <ul class="nav nav-pills">
            <li >
                <a href="http://luckyrabbitdesigns.com/index.php">Home</a>
            </li>
           <!-- <li>
                <a href="http://luckyrabbitdesigns.com/resume.php">Res</a>
            </li>-->
            <li class="dropdown">
                <a href="http://luckyrabbitdesigns.com/projects.php" data-target="#" data-toggle="dropdown" class="dropdown-toggle">Projects <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="http://luckyrabbitdesigns.com/projects/designs.php">Designs</a></li>
                    <li><a href="http://luckyrabbitdesigns.com/projects/artwork.php">Art</a></li>
                    <li><a href="http://luckyrabbitdesigns.com/projects/bookreviews.php">Book Reviews</a></li>
                     <li><a href="http://luckyrabbitdesigns.com/projects/photos.php">Photos</a></li>
                </ul>
            </li>
            <li>
                <a href="http://luckyrabbitdesigns.com/contact.php">Contact</a>
            </li>
        </ul>
    </div>
</div>

Answer 1

I had the same problem with Bootstrap 3.2.0 and the dropdown-menu on mobile phones.

Solved my problem by adding this to my css-file:

.dropdown-backdrop {
    position: static;
}

Perhaps it helps. I got the solution from this comparable problem with BS 2.3.2

Edit: And i do not use the data-target="" in my menu.