Skip to main content
Z
Zealous_Phoenix16B8
Participating Frequently
February 19, 2018
Answered

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

  • February 19, 2018
  • 1 reply
  • 4010 views

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>

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

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>

1 reply

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
February 19, 2018

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— Product User & Community Expert
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices