Giter Site home page Giter Site logo

Comments (8)

IanDelMar avatar IanDelMar commented on May 27, 2024 1

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

from wp-bootstrap-navwalker.

IanDelMar avatar IanDelMar commented on May 27, 2024 1

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.

from wp-bootstrap-navwalker.

IanDelMar avatar IanDelMar commented on May 27, 2024 1

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 #525 (comment)) and wrongly applied CSS rules.

from wp-bootstrap-navwalker.

Firefly08 avatar Firefly08 commented on May 27, 2024

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

from wp-bootstrap-navwalker.

IanDelMar avatar IanDelMar commented on May 27, 2024

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

from wp-bootstrap-navwalker.

Firefly08 avatar Firefly08 commented on May 27, 2024

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

from wp-bootstrap-navwalker.

Firefly08 avatar Firefly08 commented on May 27, 2024

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

from wp-bootstrap-navwalker.

IanDelMar avatar IanDelMar commented on May 27, 2024

You're welcome!

from wp-bootstrap-navwalker.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.