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

Report · Feb 19, 2018

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>

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

Report · Feb 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>

<head>

<title>Bootstrap Centered Navbar</title>

</head>

<body>

<h1>Bootstrap Navbar</h1>

</button>

</div>

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

</li>

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

</ul>

</div>

</nav>

</div>

</div>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

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

1 Correct answer