I am trying to create a navigation button that transforms from 3 horizontal lines to an X shape when clicked.
var anchor = document.querySelectorAll('button');
[].forEach.call(anchor, function(anchor) {
var open = false;
anchor.onclick = function(event) {
event.preventDefault();
if (!open) {
this.classList.add('close');
open = true;
} else {
this.classList.remove('close');
open = false;
}
}
});html,
body {
height: 100%;
}
body {
background-color: white;
font-family: "Source Sans pro", sans-serif;
}
#mbtn {
display: inline-block;
margin: 0 1em;
border: none;
background: none;
}
#mbtn span {
display: block;
}
.lines-button {
padding: 2rem 1rem;
transition: .3s;
cursor: pointer;
/* */
}
(lines and CSS properties are retained)
<button type="button" role="button" aria-label="Toggle Navigation" id="mbtn" class="lines-button x">
<span class="lines"></span>
</button>The functionality works perfectly without the presence of bootstrap.min.css in the HTML code. However, when I include my Bootstrap CSS, it conflicts with the existing navigation CSS and causes it to malfunction.