• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

dropdown-toggle problem with google chrome

Contributor ,
Dec 28, 2017 Dec 28, 2017

Copy link to clipboard

Copied

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.

Views

6.7K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Dec 28, 2017 Dec 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/K68vb

...

Votes

Translate

Translate
LEGEND ,
Dec 28, 2017 Dec 28, 2017

Copy link to clipboard

Copied

You are probably experiencing a conflict between jQuery and Bootstrap.

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

HTH,

^ _ ^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 28, 2017 Dec 28, 2017

Copy link to clipboard

Copied

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 28, 2017 Dec 28, 2017

Copy link to clipboard

Copied

LATEST

Thank you again Nancy!!!

Now work great!!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines