7

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>

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
AmyW
  • 313
  • 1
  • 2
  • 15

4 Answers4

13

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.

Community
  • 1
  • 1
btemperli
  • 271
  • 1
  • 5
  • 13
0

Well, I kind of figured out the issue...or, rather, a work-around. Instead of using 'nav-pills' in the class for the unordered list tag, I used 'navbar-nav'. It changes the style of the navbar, but at least it now works on my mobile phone. Here's the code...

    <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 collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <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="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <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-toggle="dropdown" class="dropdown-toggle">Projects <span class="caret"></span></a>
                <ul class="dropdown-menu" role="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>

AmyW
  • 313
  • 1
  • 2
  • 15
0

I am working with bootstrap 1.1 template. I get fix from bootstrap git-hub forum, and its working for me.

You need to add one line of code in script tag on document ready as :

$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); });

Try this, Best luck. Thanks.

Jigar Trivedi
  • 131
  • 1
  • 3
0

$(document).on('click', '.dropdown-item', function (e) {
      e.stopPropagation();
      window.location = $(this).attr('href');
  });

This Work For me

Sabin Sharma
  • 51
  • 4