Highlighted

dropdown-toggle problem with google chrome

Contributor ,
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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

4.8K

Likes

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

dropdown-toggle problem with google chrome

Contributor ,
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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

4.8K

Likes

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
Dec 28, 2017 0
LEGEND ,
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,

^ _ ^

Likes

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
Reply
Loading...
Dec 28, 2017 1
Adobe Community Professional ,
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, ACP
Alt-Web Design & Publishing

Likes

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
Reply
Loading...
Dec 28, 2017 0
Contributor ,
Dec 28, 2017

Copy link to clipboard

Copied

Thank you again Nancy!!!

Now work great!!

Likes

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
Reply
Loading...
Dec 28, 2017 0