imjp imjp - 5 months ago 33x
Javascript Question

Bootstrap 3 collapsed menu not working on mobile screens

It seems a lot of people are having this trouble (, but the solution that worked for some is not working for me.

If you try to open my website at and resize the window until the burger menu appears, you'll notice that nothing happens if you click on the items with a submenu (benefits or industries).

Does anyone have any idea what I could do to fix this?


1mjp Hi there, have a look at the Fiddle here.
Or the snippet below.

It only has standard Bootstrap css/js.
And your menu, which works fine, no problem like in your website.
Have a look to see if you have some js closing the link when clicked.

I think you will find the issue is in this file axxon/js/creative.js.
The problem that closes the menu when clicked.

Hope this helps.

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="">


<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" 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>
                <a class="navbar-brand page-scroll logo logo_black" href="">
                    Axxon Tracking

            <!-- 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="active">
                        <a href="./">Home</a>
                        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="./benefits.php">Benefits <span class="caret"></span></a>
                          <ul class="dropdown-menu" role="menu">
                            <li><a href="./reduce-fuel-costs.php">Reduce Fuel costs</a></li>
                            <li><a href="./eliminate-theft-and-waste.php">Eliminate Theft and Waste</a></li>
                            <li><a href="./reduce-maintenance-costs.php">Reduce Maintenance Costs</a></li>
                            <li><a href="./reduce-labor-costs.php">Reduce Labor Costs</a></li>
                            <li><a href="./improve-safety.php">Improve Safety</a></li>

                        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="./industries.php">Industries <span class="caret"></span></a>
                          <ul class="dropdown-menu" role="menu">
                            <li><a href="./construction-and-heavy-equipment.php">Construction &amp; Heavy Equipment</a></li>
                            <li><a href="./distribution.php">Distribution</a></li> 
                            <li><a href="./transportation.php">Transportation</a></li> 
                            <li><a href="./insurance.php">Insurance</a></li> 
                        <a href="./contact.php">Contact</a>
            <!-- /.navbar-collapse -->
        <!-- /.container-fluid -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src=""></script>
    <script src=""></script>