Bootstrap Collapsed Menu Links Not Working on Mobile Devices

Looks like this is a known issue with Bootstrap (https://github.com/twitter/bootstrap/issues/4550 and possibly also https://github.com/twitter/bootstrap/issues/7968) which is very disappointing because it's been open for a long time and never fixed, and the primary reason to use Bootsrtap is its promise of responsive design.

The fix proposed at https://github.com/Bitergia/bootstrap/commit/25e8eeb47f01aceed57cb2715036a69395892fa8 seems to work, but it is using the Bootstrap source code, so if you are using the minified version and are not using the source scripts it looks differently.

I fixed it in my case in the minified version by adding the substring "disable-" to the touchstart test, therefore disabling this functionality.

To do that in your minified bootstrap.min.js file, find the substring

"ontouchstart"

and replace it with

"disable-ontouchstart"

Thank you @Shmalzy for trying to help.

Bootstrap navbar collapse not working on mobile devices

Noob mistake.

Was missing

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

in the head section of application.html.erb.

Bootstrap 3 collapsed menu not working on mobile screen

You need to put at least a class of navbar on your nav tag. But apperently there was something else wrong so here is a working example of the default navbar. From there you can change the CSS to your liking. I also added one change to make the dropdowns appear on hover.

https://jsfiddle.net/gno4zcrr/1/

.dropdown:hover .dropdown-menu {   display: block;}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">  <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" aria-expanded="false">        <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://greenlux.pt">        <img src="http://greenlux.pt/logo_gl.png" width="125" height="21" alt="Sample Image" />      </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><a href="#">GU10</a> </li>
        <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">E27 <span class="caret"></span></a>          <ul class="dropdown-menu">            <li><a href="#">Par30</a> </li>            <li><a href="#">Par38</a> </li>          </ul>        </li>

        <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">R7S <span class="caret"></span></a>          <ul class="dropdown-menu">            <li role="separator" class="divider"></li>            <li> 360º</li>            <li role="separator" class="divider"></li>            <li><a href="#">78mm</a> </li>            <li><a href="#">118mm</a> </li>            <li><a href="#">138mm</a> </li>            <li role="separator" class="divider"></li>            <li> 180º</li>            <li role="separator" class="divider"></li>            <li><a href="#">118mm </a> </li>          </ul>        </li>
        <li><a href="#">G24</a> </li>
        <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">2G11 <span class="caret"></span></a>          <ul class="dropdown-menu">            <li><a href="#">10W</a> </li>            <li><a href="#">32W</a> </li>          </ul>        </li>
        <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">SPOT <span class="caret"></span></a>          <ul class="dropdown-menu">            <li><a href="#">Redondo</a> </li>            <li><a href="#">Quadrado</a> </li>          </ul>        </li>
        <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">DOWNLIGHTS <span class="caret"></span></a>          <ul class="dropdown-menu">            <li><a href="#">15W</a> </li>            <li><a href="#">30W</a> </li>          </ul>        </li>
        <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">PLAFON         <span class="caret"></span></a>          <ul class="dropdown-menu">            <li><a href="#">Redondo</a> </li>            <li><a href="#">Oval</a> </li>          </ul>        </li>
      </ul>    </div>    <!-- /.navbar-collapse -->  </div>  <!-- /.container-fluid --></nav>

How to fix toggle menu not working on mobile device

This issue might be caused by jquery version mismatch with bootstrap. So check your versions of bootstrap and jquery. Also, It seems you have mistaken while creating a collapsible navbar, check your collapse button and data toggle targets also.

Still, here is my navbar its responsive and links are working fine on mobile too:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-md navbar-dark bg-dark">  <div class="navheader-div order-0">    <a class="navbar-brand mr-auto" href="/home">B-strap NavBar</a>    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">      <span class="navbar-toggler-icon"></span>    </button>  </div>  <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">    <ul class="navbar-nav mr-auto">      <li class="nav-item active">        <a class="nav-link" href="#">Home</a>      </li>      <li class="nav-item">        <a class="nav-link" href="#">menu-1</a>      </li>      <li class="nav-item">        <a class="nav-link" href="#">menu-2</a>      </li>      <li class="nav-item">        <a class="nav-link" href="#">menu-3</a>      </li>      <li class="nav-item" *ngIf="false">        <a class="nav-link" href="#">menu-4</a>      </li>      <li class="nav-item">        <a class="nav-link" href="#">Settings</a>      </li>    </ul>  </div>  <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">    <ul class="navbar-nav ml-auto">      <li class="nav-item">        <a class="nav-link" href="#">Login</a>      </li>      <li class="nav-item">        <a class="nav-link" href="#">Registration</a>      </li>      <li class="nav-item">        <a class="nav-link" href="#">Log Out</a>      </li>    </ul>  </div></nav>

Bootstrap 3 collapsed menu not working on mobile screens

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.

<!DOCTYPE html><html lang="en">  <head>    <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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

</head>
<body>    <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>                </button>                <a class="navbar-brand page-scroll logo logo_black" href="http://axxon.co/">                    Axxon Tracking                </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="active">                        <a href="./">Home</a>                    </li>                     <li>                        <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>                          </ul>
                    </li>                    <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 & 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>                           </ul>                    </li>                     <li>                        <a href="./contact.php">Contact</a>                    </li>                </ul>            </div>            <!-- /.navbar-collapse -->        </div>        <!-- /.container-fluid -->    </nav>               

    <!-- Bootstrap core JavaScript    ================================================== -->    <!-- Placed at the end of the document so the pages load faster -->    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>    </body></html>

My Bootstrap 4 Navbar isn't collapsing in Mobile View

At first, make sure your computer is connected to the internet. This to ensure the CDN loaded and saved by your browser.

Secondly, open the Developer tools ctrl + shift + i (chrome keyboard shortcut) and check on the tabbed console there is no error. If there have an error message, please fix it first (the most problem is the CDN link is not work or there is a typing error).

If Navbar on mobile is still not collapsing, please clear your browser data ctrl + shift + del (chrome keyboard shortcut) and reload the page.

Note: It's not recommended or bad practice to embed your script to tab head, please embed them to the end of the tag body or before </body>

Bootstrap collapsable Navbar isn't displaying the menu i.e the dropdown menu for mobile devices

In code pen it says jquery not available in the code pen console. So i added

     <script
  src="https://code.jquery.com/jquery-2.2.4.js"
  integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
  crossorigin="anonymous"></script>

just before the final the body tag
to get it working

Bootstrap dropdown menu not working in mobile view

Hey you have some extra text in your button

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">

Instead of using data-bs-toggle="collapse" and data-bs-target="#navbarSupportedContent" you have to use data-toggle="collapse" and data-target="#navbarsExample01" take out the bs as you are using bootstrap 4 for more information you can check de Docs in Bootstrap official site.

Also don't forget to close your nav tag at the end of your code

Bootstrap Collapsed Menu Links Not Working on Mobile Devices