Problem opening burger menu with icon

Question

Hello, all right?

I have a problem with the website I’m creating. I made an offCanvas menu to open when clicking the button on mobile devices, but when clicking on the icon this button, it appears the attribute class (by the developer mode is possible to see), but the value is not placed in it, but when clicking on the edge of the button, it inserts, as you can see in the image below:

By clicking on the icon inside the button

By clicking on the edge of the button where the icon is

HTML of the section where the button

<button class="menu-button d-block d-xl-none d-lg-none" type="button" id="open-button">
          <span><i  class="fas fa-bars"></i></span>
</button>

Javascript to open the menu:

(function() {

var bodyEl = document.body,
    content = document.querySelector( '.content' ),
    openbtn = document.getElementById( 'open-button' ),
    closebtn = document.getElementById( 'close-button' ),
    isOpen = false;

function init() {
    initEvents();
}

function initEvents() {
    openbtn.addEventListener( 'click', toggleMenu );
    
    if( closebtn ) {
        closebtn.addEventListener( 'click', toggleMenu );
    }

    // close the menu element if the target it´s not the menu element or one of its descendants..
    content.addEventListener( 'click', function(ev) {
        var target = ev.target;
        if( isOpen && target !== openbtn ) {
            toggleMenu();
        }
    } );
}

function toggleMenu() {
    if( isOpen ) {
        classie.remove( bodyEl, 'show-menu' );
    }
    else {
        classie.add( bodyEl, 'show-menu' );
    }
    isOpen = !isOpen;
}

init();
})();

Thanks in advance!

OBS: In Javascript there are some functions of another file I’m using (I took the codes from a Github repository)

/*!
* classie - class helper functions
* from bonzo https://github.com/ded/bonzo
*
* classie.has( elem, 'my-class' ) -> true/false
* classie.add( elem, 'my-new-class' )
* classie.remove( elem, 'my-unwanted-class' )
* classie.toggle( elem, 'my-class' )
*/

/*jshint browser: true, strict: true, undef: true */
/*global define: false */

(function (window) {
 "use strict";

 // class helper functions from bonzo https://github.com/ded/bonzo

 function classReg(className) {
 return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
 }

 // classList support for class management
 // altho to be fair, the api sucks because it won't accept multiple classes at once
 var hasClass, addClass, removeClass;

 if ("classList" in document.documentElement) {
 hasClass = function (elem, c) {
  return elem.classList.contains(c);
 };
 addClass = function (elem, c) {
  elem.classList.add(c);
 };
 removeClass = function (elem, c) {
  elem.classList.remove(c);
 };
} else {
hasClass = function (elem, c) {
  return classReg(c).test(elem.className);
};
addClass = function (elem, c) {
  if (!hasClass(elem, c)) {
    elem.className = elem.className + " " + c;
  }
};
removeClass = function (elem, c) {
  elem.className = elem.className.replace(classReg(c), " ");
};
}

function toggleClass(elem, c) {
var fn = hasClass(elem, c) ? removeClass : addClass;
fn(elem, c);
}

var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass,
};

// transport
if (typeof define === "function" && define.amd) {
// AMD
define(classie);
} else {
// browser global
window.classie = classie;
}
})(window);

Answer 1

Hello.

Removing the class from the element does not remove the class attribute. This is because it may be that the element has several css classes and when removing a class the class attribute is still there so that others are not lost, you understand?

In my opinion this is not a problem, but if it bothers you, follow the code to fix it:

    function toggleMenu() {
        document.body.classList.toggle('show-menu');
    }

or using this Classie library:

    function toggleMenu() {
        classie.toggle( bodyEl, 'show-menu' );
    }

I hope I’ve helped.