I have been working on a website using Angular 1, Bootstrap, and CSS3. The Bootstrap navbar functions perfectly in desktop mode, but the submenu is not working in the mobile version. I am able to expand the main menu item, but the three submenus are not visible at all. I have been struggling with this issue for three weeks now and cannot seem to resolve it. The website is essentially a single-page application with Angular routing logic.
Bootstrap version: 3.3.6
You can visit my website www.europeansaga.com to see the issue in mobile mode.
Below is the code along with HTML and JS models containing the menu data
// JavaScript code inside my controller
$scope.mainMenu = [{
name: 'Home',
hasChild: false,
iconClass: 'glyphicon glyphicon-home',
url: '/'
}, {
name: 'Gallery',
hasChild: false,
iconClass: 'glyphicon glyphicon-camera',
isActive: false,
url: '/gallery'
},
// Rest of the menu items omitted for brevity
$scope.submenu['Travel Planning'] = [];
for (var i = 0; i < travelPlanningSubMenuItems.length; i++) {
$scope.submenu['Travel Planning'].push(travelPlanningSubMenuItems[i]);
}
// Rest of the submenu items populated in a similar manner
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
// Navbar structure code omitted for brevity
</nav>Mikkel suggested placing the following code inside document.ready as a CSS class onclick. However, even after implementing this, the issue persists. Can someone provide assistance? Unfortunately, I cannot share the website due to this major issue I am facing.
// Patch for bootstrap hamburger menu
$(".navbar-responsive-collapse").click(function(e) {
if ($(e.target).is('a')) {
$(this).collapse('hide');
}
});