Highlighted

Bootstrap dropdown parent moves on click. How do I prevent this?

Community Beginner ,
Feb 19, 2018

Copy link to clipboard

Copied

I have a bootstrap dropdown menu made in Dreamweaver CC that all lookes fine when you hover over it. But if you accidentally click on the parent (which I assume people are going to do), it will jump to the left. Has anybody any suggestion on what the problem could be?
This is the dropdown code:

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-calendar-check-o" aria-hidden="true"></i> Besök <b class="caret"></b></a>

  <ul class="dropdown-menu clearfix" role="menu">

  <li><a href="dittbesok.php" role="button" aria-expanded="false"><i class="fa fa-calendar-check-o" aria-hidden="true"></i> Info </a></li>

  <li><a href="patientberattelser.php" role="button" aria-expanded="false"><i class="fa fa-address-card" aria-hidden="true"></i> Patientberättelser</a></li>

  </ul>

  </li>

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

Code fragments don't tell us much.  Can you put your work online and post the URL to your problem page?

For reference, below is a navbar with a dropdown menu.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap Centered Navbar</title>

<meta charset="utf-8">

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

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

<!-- Latest compiled and minified Bootstrap CSS-->

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

</head>

<body>

<div class="container">

<div class="row">

<h1>Bootstrap Navbar</h1>

<!--begin top nav bar-->

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

<div class="container-fluid">

<div class="navbar-header">

<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">

<li class="active"><a href="#">HOME</a></li>

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown<span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="#">Sub-menu 1</a></li>

<li><a href="#">Sub-menu 2</a></li>

<li><a href="#">Sub-menu 3</a></li>

<li><a href="#">Sub-menu 4</a></li>

<li><a href="#">Sub-menu 5</a></li>

</ul>

</li>

<li ><a href="#">Contact</a></li>

</ul>

</div>

</div>

<!--/top nav--></nav>

<!--/row--></div>

<!--/container--></div>

<!--Latest compiled & minified jQuery 3 JS-->

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

<!--Latest compiled & minifed Bootstrap JS-->

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

</body>

</html>

TOPICS
Create menus in Dreamweaver

Views

2.6K

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

Bootstrap dropdown parent moves on click. How do I prevent this?

Community Beginner ,
Feb 19, 2018

Copy link to clipboard

Copied

I have a bootstrap dropdown menu made in Dreamweaver CC that all lookes fine when you hover over it. But if you accidentally click on the parent (which I assume people are going to do), it will jump to the left. Has anybody any suggestion on what the problem could be?
This is the dropdown code:

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-calendar-check-o" aria-hidden="true"></i> Besök <b class="caret"></b></a>

  <ul class="dropdown-menu clearfix" role="menu">

  <li><a href="dittbesok.php" role="button" aria-expanded="false"><i class="fa fa-calendar-check-o" aria-hidden="true"></i> Info </a></li>

  <li><a href="patientberattelser.php" role="button" aria-expanded="false"><i class="fa fa-address-card" aria-hidden="true"></i> Patientberättelser</a></li>

  </ul>

  </li>

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

Code fragments don't tell us much.  Can you put your work online and post the URL to your problem page?

For reference, below is a navbar with a dropdown menu.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap Centered Navbar</title>

<meta charset="utf-8">

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

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

<!-- Latest compiled and minified Bootstrap CSS-->

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

</head>

<body>

<div class="container">

<div class="row">

<h1>Bootstrap Navbar</h1>

<!--begin top nav bar-->

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

<div class="container-fluid">

<div class="navbar-header">

<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">

<li class="active"><a href="#">HOME</a></li>

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown<span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="#">Sub-menu 1</a></li>

<li><a href="#">Sub-menu 2</a></li>

<li><a href="#">Sub-menu 3</a></li>

<li><a href="#">Sub-menu 4</a></li>

<li><a href="#">Sub-menu 5</a></li>

</ul>

</li>

<li ><a href="#">Contact</a></li>

</ul>

</div>

</div>

<!--/top nav--></nav>

<!--/row--></div>

<!--/container--></div>

<!--Latest compiled & minified jQuery 3 JS-->

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

<!--Latest compiled & minifed Bootstrap JS-->

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

</body>

</html>

TOPICS
Create menus in Dreamweaver

Views

2.6K

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
Feb 19, 2018 0
Adobe Community Professional ,
Feb 19, 2018

Copy link to clipboard

Copied

Code fragments don't tell us much.  Can you put your work online and post the URL to your problem page?

For reference, below is a navbar with a dropdown menu.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap Centered Navbar</title>

<meta charset="utf-8">

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

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

<!-- Latest compiled and minified Bootstrap CSS-->

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

</head>

<body>

<div class="container">

<div class="row">

<h1>Bootstrap Navbar</h1>

<!--begin top nav bar-->

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

<div class="container-fluid">

<div class="navbar-header">

<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">

<li class="active"><a href="#">HOME</a></li>

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown<span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="#">Sub-menu 1</a></li>

<li><a href="#">Sub-menu 2</a></li>

<li><a href="#">Sub-menu 3</a></li>

<li><a href="#">Sub-menu 4</a></li>

<li><a href="#">Sub-menu 5</a></li>

</ul>

</li>

<li ><a href="#">Contact</a></li>

</ul>

</div>

</div>

<!--/top nav--></nav>

<!--/row--></div>

<!--/container--></div>

<!--Latest compiled & minified jQuery 3 JS-->

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

<!--Latest compiled & minifed Bootstrap 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...
Feb 19, 2018 0