twitter-bootstrap


Navbar dropdown not working on mobile devices


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 >
Home
</li>
<!-- <li>
Res
</li>-->
<li class="dropdown">
Projects <b class="caret"></b>
<ul class="dropdown-menu">
<li>Designs</li>
<li>Art</li>
<li>Book Reviews</li>
<li>Photos</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
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.
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 >
Home
</li>
<!-- <li>
Res
</li>-->
<li class="dropdown">
Projects <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Designs</li>
<li>Art</li>
<li>Book Reviews</li>
<li>Photos</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
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.

Related Links

bootstrap modal for delete confirmation mvc
Space Between col-md fix?(bootstrap)
Background images flanking the Bootstrap container
Bootbox example not working
Can't get Bootstrap ScrollSpy to work on my page
Kendo UI based responsive web application
How can one manage front-end library dependencies in Clojure?
drag and drop is not working with higher versions of jquery.min.js
Scrollspy just active the last button of the navbar
bootstrap carousel within a column
Upgrading a framework/library in your project
Bootstrap: glyphicon-triangle-bottom not displaying
bootstrap type ahead not working
Why there are no bootstrap support for handling grid system breakpoint events ?
Helper class for text that will go on a dark background
How to Align Ingredients Form In Bootstrap [Inventory System]

Categories

HOME
mobile
sql-server-2014
oracle-sqldeveloper
postgresql-9.3
weblogic
x86-64
spotfire
stdout
crm
where
azure-resource-manager
overrides
confluence-rest-api
aggregation-framework
clip-path
genexus
obd-ii
jcodemodel
jpql
hql
openstack-horizon
facebook-marketing-api
k-means
taxonomy
aws-devicefarm
pushbullet
rvm
scalatest
cloudformation
uibarbuttonitem
osgi-bundle
semantic-ui-react
opencsv
language-detection
traitsui
bootcamp
mootools
origami
nsdateformatter
gem-fury
icu
glide-image-library
pyexcel
f#-fake
android-doze-and-standby
qtwebkit
hierarchical-clustering
vertex
stringbuilder
copy-constructor
blackberry-webworks
firebase-job-dispatcher
x12
syslog4j
laterjs
wizard
bluetooth-lowenergy-4.2
web-performance
gnu-sort
pdcurses
service-broker
frisby.js
cocos2d-x-2.x
redmine-plugins
dotcmis
object-oriented-database
facebook-java-api
db2-connect
aspnet-compiler
ojb
mosix
outlook-object-model
bho
microsoft-speech-platform
configurationsection
tasklist
waveout
cgaffinetransform
mcpd
zipstream
html5-animation
for-xml
code-golf
weak-typing
scalable

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile