You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm trying to put a hamburger icon inside of the button that controls the open of the slide-menu, clicking on the icon causes the following js error.
slide-menu.ie.js:1060 Uncaught TypeError: e.className.includes is not a function
at HTMLDocument. (slide-menu.ie.js:1060)
(anonymous) @ slide-menu.ie.js:1060
Thank you for pointing this out. In what browser did this occur? Since you're using the version for it: is it Internet Explorer? String.includes() is not available in older browsers, so this is probably the cause for the JS error. The includes() function should have been transpiled by Babel to something the browser understands.
I'm using Chrome, but it does happen in Firefox as well.
Here's what's weird. I created a CodePen to show you (https://codepen.io/rpb138/pen/Rdzgod), but now I'm getting a different error. It's saying that the property 'parentElement' is null.
However, I tried to do a little debugging after I entered this issue, and what I found was if you I made the button wide and centered the hamburger menu within the wide button, you can click on either side of the hamburger icon and it would work. If you clicked directly on the hamburger icon it would get the error.
I think this happened because it was getting the class of the hamburger icon (the span) and not the button classes. Hope that makes sense.
I'm trying to put a hamburger icon inside of the button that controls the open of the slide-menu, clicking on the icon causes the following js error.
Button HTML:
<button id="navMobBtn" class="mobile-menu__button--open slide-menu__control" type="button" data-target="mobile-nav-menu" data-action="open" aria-controls="mobile-nav-menu" aria-expanded="false" aria-label="Toggle navigation"> <span class="slide-menu__control hamburger-icon"></span> </button>
CSS:
.hamburger-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5); height: 2.5rem; width: 2.5rem; }
EDIT: This also happens when you just wrap a HTML element around the button text.
<span class="myClass">Open Menu</span>
The text was updated successfully, but these errors were encountered: