I created a basic burger button using HTML and CSS, everything was working perfectly until I decided to incorporate Bootstrap into my project for alignment purposes, which ended up causing conflicts with my existing CSS.
Instead of adding Bootstrap,
https://i.sstatic.net/ttW1J.png
After integrating Bootstrap:
https://i.sstatic.net/OCEuJ.png
I attempted to include Bootstrap before my CSS stylesheet in an effort to prevent it from overriding, but unfortunately, it did not resolve the issue.
Below is my code:
HTML
<button class="menuButton">
<div class="buttonContainer">
<span></span>
<span id="midspan"></span>
<span></span>
</div>
</button>
CSS
.menuButton{
margin: 0;
padding: 0;
border: none;
width: 0vmin;
overflow: hidden;
background-color: transparent;
animation: buttonAnim 0.75s forwards;
animation-delay: 0.5s;
float: right;
}
@keyframes buttonAnim {
100%{
width:3vmin;
right: 0;
}
}
.menuButton span{
width: 3vmin;
height: 0.2vmin;
margin-bottom: 0.5vmin;
margin-top: 0.5vmin;
display: block;
background-color: coral;
}
.buttonContainer{
width: 3vmin;
}
#midspan {
transform: translate(1vmin, 0);
transition: transform 0.3s ease;
}
.menuButton:hover {
cursor: pointer;
}
.menuButton:hover #midspan{
transform: translate(0);
}