Highlighted

I have a menu with sub-menus that won't stop flickering

New Here ,
May 31, 2020

Copy link to clipboard

Copied

How can I stop the main menu from flickering when a user hovers over it?  It's so bad that users can't even get to the sub-menu to open anything. It just flickers.  

Views

178

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

I have a menu with sub-menus that won't stop flickering

New Here ,
May 31, 2020

Copy link to clipboard

Copied

How can I stop the main menu from flickering when a user hovers over it?  It's so bad that users can't even get to the sub-menu to open anything. It just flickers.  

Views

179

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
May 31, 2020 0
Adobe Community Professional ,
May 31, 2020

Copy link to clipboard

Copied

For us to be able to help you, we need to be able to replicate the problem. The best way for us to replicate the problem is to use the code that you have used. The best way for us to get the code that you have used is to give us the link to your site. Alternatively, you could copy and paste the code here.


Ben

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...
May 31, 2020 0
Adobe Community Professional ,
May 31, 2020

Copy link to clipboard

Copied

What's the URL please?

 

Generally speaking, we rarely use sub-menus in responsive sites because they are awkward for mobile users that lack a mouse.   That said, here's a simple Bootstrap 4 navbar with a dropdown that invokes on click or finger tap.

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Centered Navbar</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mynavbar" aria-controls="mynavbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse justify-content-md-center" id="mynavbar">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Centered nav <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="https://example.com" id="mydropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="mydropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div>
</li>
</ul>
</div>
</nav>

<!--Supporting scripts. First jQuery, then popper, then Bootstrap JS--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></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...
May 31, 2020 0