Menu
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>
591
Why is my drop down menu not working in bootstrap? Solution : The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle="dropdown" to toggle the dropdown.
To create a collapsible navigation bar, use a button with class="navbar-toggler", data-toggle="collapse" and data-target="#thetarget" . Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse" , followed by an id that matches the data-target of the button: "thetarget".
To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute. The .caret class creates a caret arrow icon (), which indicates that the button is a dropdown.
To add a dropdown to a button, simply wrap the button and dropdown menu in a . btn-group. You can also use <span class = "caret"></span> to act as an indicator that the button is a dropdown.
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.
92
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
