Skip to main content
Jhon Carlo
Inspiring
December 28, 2017
Answered

dropdown-toggle problem with google chrome

  • December 28, 2017
  • 2 replies
  • 7076 views

Hi,

I'm tying to use a drop down menu but  this doesn't work in google chrome on computer  but  work on properly on smart phone and tablet and computer with safari.

Somewere I have notice of this:

If insert before the </body> the strings below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

this can solve the problem with google chrome on computer (but doesn't work on tablet and smartphone)

Any hint?

Thank you.

Jhon.

    This topic has been closed for replies.
    Correct answer Nancy OShea

    I use the very latest jQuery 3.2 with Bootstrap 3.7 and have no problems.

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap 3.3.7 Starter</title>

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

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Latest Bootstrap 3.7 CSS-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>

    body {padding-top: 55px}

    </style>

    </head>

    <body>

    <!--begin top nav bar-->

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

    <div class="container-fluid">

    <div class="navbar-header"> <a class="navbar-brand" href="#"> BRAND NAME or LOGO </a>

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

    </div>

    <div class="collapse navbar-collapse" id="myNavbar">

    <ul class="nav navbar-nav navbar-right">

    <li class="active"><a href="#">MENU 1</a></li>

    <!--Begin dropdown-->

    <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>

    <ul class="dropdown-menu">

    <li><a href="#">submenu 1-1</a></li>

    <li><a href="#">submenu 1-2</a></li>

    <li><a href="#">submenu 1-3</a></li>

    </ul>

    </li>

    <li><a href="#">MENU 3</a></li>

    <li><a href="#">MENU 4</a> </li>

    <li><a href="#">MENU 5</a> </li>

    <li><a href="#">MENU 6</a></li>

    </ul>

    </div>

    </div>

    <!--end top nav-->

    </nav>

    <div class="container">

    <div class="row">

    <div class="jumbotron">

    <h1>Hello World!</h1>

    <h3>Bootstrap 3.7</h3>

    </div>

    </div>

    <div class="row">

    <div class="col-sm-6 col-md-3">

    PAGE CONTENT GOES HERE.....

    </div>

    <div class="col-sm-6 col-md-3">

    PAGE CONTENT GOES HERE.....

    </div>

    <div class="col-sm-6 col-md-3">

    PAGE CONTENT GOES HERE.....

    </div>

    <div class="col-sm-6 col-md-3">

    PAGE CONTENT GOES HERE.....

    </div>

    </div>

    </div>

    <!--latest jQuery 3.2-->

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <!--Bootstrap 3.7 JS-->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </body>

    </html>

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    December 28, 2017

    I use the very latest jQuery 3.2 with Bootstrap 3.7 and have no problems.

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap 3.3.7 Starter</title>

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

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Latest Bootstrap 3.7 CSS-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>

    body {padding-top: 55px}

    </style>

    </head>

    <body>

    <!--begin top nav bar-->

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

    <div class="container-fluid">

    <div class="navbar-header"> <a class="navbar-brand" href="#"> BRAND NAME or LOGO </a>

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

    </div>

    <div class="collapse navbar-collapse" id="myNavbar">

    <ul class="nav navbar-nav navbar-right">

    <li class="active"><a href="#">MENU 1</a></li>

    <!--Begin dropdown-->

    <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>

    <ul class="dropdown-menu">

    <li><a href="#">submenu 1-1</a></li>

    <li><a href="#">submenu 1-2</a></li>

    <li><a href="#">submenu 1-3</a></li>

    </ul>

    </li>

    <li><a href="#">MENU 3</a></li>

    <li><a href="#">MENU 4</a> </li>

    <li><a href="#">MENU 5</a> </li>

    <li><a href="#">MENU 6</a></li>

    </ul>

    </div>

    </div>

    <!--end top nav-->

    </nav>

    <div class="container">

    <div class="row">

    <div class="jumbotron">

    <h1>Hello World!</h1>

    <h3>Bootstrap 3.7</h3>

    </div>

    </div>

    <div class="row">

    <div class="col-sm-6 col-md-3">

    PAGE CONTENT GOES HERE.....

    </div>

    <div class="col-sm-6 col-md-3">

    PAGE CONTENT GOES HERE.....

    </div>

    <div class="col-sm-6 col-md-3">

    PAGE CONTENT GOES HERE.....

    </div>

    <div class="col-sm-6 col-md-3">

    PAGE CONTENT GOES HERE.....

    </div>

    </div>

    </div>

    <!--latest jQuery 3.2-->

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <!--Bootstrap 3.7 JS-->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </body>

    </html>

    Nancy O'Shea— Product User & Community Expert
    Jhon Carlo
    Inspiring
    December 28, 2017

    Thank you again Nancy!!!

    Now work great!!

    WolfShade
    Legend
    December 28, 2017

    You are probably experiencing a conflict between jQuery and Bootstrap.

    https://community.canvaslms.com/thread/19727-jquery-and-bootstrap-conflict

    HTH,

    ^ _ ^