Skip to main content
gabrielle777
gabrielle777
Participant
May 31, 2020
Question

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

  • May 31, 2020
  • 2 replies
  • 312 views

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.  

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    June 1, 2020

    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— Product User & Community Expert
    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    May 31, 2020

    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.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices