Menu button disappears when clicked

[Firefly08]

Steps to reproduce the issue:

I have this website: www.bucatareselevesele.ro where I used the Boostrap NavWalker and it worked OK for a while. But recently when I click on the Menu Button it disappears and nothing is happening.

What I expected:

To see the menu.

What happened instead:

The menu button disappears and I can't see any menu.

[IanDelMar]

Hi, could you please disable autoptimize and report back if that solves the issue?

[Firefly08]

I disabled Autoptimise and cleared the cache. Is still the same. The button disappears on click.

[IanDelMar]

Thanks! Please leave the plugin deactivated. There are some JS errors. I'll look at the issue again in the next few hours.

[IanDelMar]

Have you altered the bootstap.js file?

Your bootstrap.js contains the following code on lines 20-26

$('.hamburger').on('click', function () {
  $('.menu').addClass('open');
});

$( '.menu a' ).on("click", function(){
  $('.menu').removeClass('open');
});

which do not originate from Bootstrap. What's that for? Do you actually have an element with the class .hamburger or .menu? I can't find one.

Please try if removing it solves the issue. If that code is somehow functional, you may also try wrapping those lines in function ($) { ... }(jQuery) or replacing the $ with jQuery. However, I'd recommend moving that code to your general.js instead of adding it to the bootstrap.js.

You should really consider addressing the GDPR issues on your site next.

[Firefly08]

I removed those lines and now I can see the menu (it's OK), but the button is disappearing also on click.

[IanDelMar]

That's simple CSS.

Look at your style.css on line 744-760

.navbar {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  z-index: 10;
  width: 100%;
  margin-bottom: 0;
  min-height: 1px;
  font-size: 13px;
  background: #0f8d46;
  border: none;
    padding-top: 2px;
      -webkit-box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.3);

}

and on line 834-839

.navbar .navbar-toggle:hover {
  border-color: #0f8d46;
}
.navbar .navbar-toggle:hover .icon-bar {
  background: #0f8d46;
}

On hover the navbar's background color (#0f8d46) matches the button color (#0f8d46).

This issue is not related to the WP Bootstrap Navwalker but caused by erroneous JS (see https://github.com/wp-bootstrap/wp-bootstrap-navwalker/issues/525#issuecomment-937668201) and wrongly applied CSS rules.

[Firefly08]

It's working great now. Thank you so much for your help and your time. Really appreciate it.

[IanDelMar]

You're welcome!