anubhav
Reputation: 21
Bootstrap dropdown not working on mobile on click
I have added a dropdown to my website but it is not working properly on mobile devices when the nav bar is collapsed. When I click on dropdown it closes the navbar instead of showing the items under the dropdown.
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<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="#page-top">Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li class="page-scroll">
<a href="#portfolio">Portfolio</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Games <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/Spikes" target="_blank">Avoid The Spikes</a></li>
<li><a href="/SpaceShooter" target="_blank">Space Shooter</a></li>
<!--<li role="separator" class="divider"></li>-->
<!--<li class="dropdown-header">Nav header</li>-->
<!--<li><a href="#">Separated link</a></li>-->
</ul>
</li>
</ul>
</div>
</div>Upvotes: 0
Views: 8158
Answers (2)
Sai Manoj
Reputation: 3859
Is this what you were looking for? Navbar with sub-menu
(function($) {
$(document).ready(function() {
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #555;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
/*
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
}
*/<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container pen">
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<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="#" target="_blank">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Active Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown 1</a></li>
<li><a href="#">Dropdown 2</a></li>
<li><a href="#">Dropdown 3</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 4</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu 4.1</a></li>
<li><a href="#">Dropdown Submenu 4.2</a></li>
<li><a href="#">Dropdown Submenu 4.3</a></li>
<li><a href="#">Dropdown Submenu 4.4</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 5</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu 5.1</a></li>
<li><a href="#">Dropdown Submenu 5.2</a></li>
<li><a href="#">Dropdown Submenu 5.3</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu 5.4.1</a></li>
<li><a href="#">Dropdown Submenu 5.4.2</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4.3</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu 5.4.3.1</a></li>
<li><a href="#">Dropdown Submenu 5.4.3.2</a></li>
<li><a href="#">Dropdown Submenu 5.4.3.3</a></li>
<li><a href="#">Dropdown Submenu 5.4.3.4</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4.4</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu 5.4.4.1</a></li>
<li><a href="#">Dropdown Submenu 5.4.4.2</a></li>
<li><a href="#">Dropdown Submenu 5.4.4.3</a></li>
<li><a href="#">Dropdown Submenu 5.4.4.4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Link 1</a></li>
<li><a href="#">Dropdown Link 2</a></li>
<li><a href="#">Dropdown Link 3</a></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 4</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 4.1</a></li>
<li><a href="#">Dropdown Submenu Link 4.2</a></li>
<li><a href="#">Dropdown Submenu Link 4.3</a></li>
<li><a href="#">Dropdown Submenu Link 4.4</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 5</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 5.1</a></li>
<li><a href="#">Dropdown Submenu Link 5.2</a></li>
<li><a href="#">Dropdown Submenu Link 5.3</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 5.4.1</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.2</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.3</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 5.4.3.1</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.3.2</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.3.3</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.3.4</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.4</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 5.4.4.1</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.4.2</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.4.3</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.4.4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</div>
</div>
</div>
</body>
</html>Upvotes: 1
codeherk
Reputation: 1657
Your script and link tags are misplaced in the code snippet. These tags should be placed in your HTML file. The link tag must be placed in the head tag. I made an edit to your question thinking you made a mistake, but placing those tags where they belong achieves the desired result:
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<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="#page-top">Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li class="page-scroll">
<a href="#portfolio">Portfolio</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Games <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/Spikes" target="_blank">Avoid The Spikes</a></li>
<li><a href="/SpaceShooter" target="_blank">Space Shooter</a></li>
<!--<li role="separator" class="divider"></li>-->
<!--<li class="dropdown-header">Nav header</li>-->
<!--<li><a href="#">Separated link</a></li>-->
</ul>
</li>
</ul>
</div>
</div>Upvotes: 0
Related Questions
- bootstrap- dropdown not working on mobile devices
- Bootstrap v3.3.6 Dropdown not working with mobile menu
- Bootstrap dropdown not working in mobile
- Bootstrap 3 multi level dropdown menu not working in mobile
- One page bootstrap dropdown not working on mobile device
- Bootstrap dropdown issues on mobile touch
- bootstrap dropdown menu doesn't work on mobile
- Twitter Bootstrap (v2.2.1) dropdown links not working on mobile
- Bootstrap Mobile Dropdown menu links not clickable
- Bootstrap Dropdown links not working mobile