I am implementing a menu with CSS and JQuery. The fact is that Safari and Chromium work perfectly for me, but in Firefox the .animate that rescales the logo making it smaller when I press the hamburger button doesn't work, nor does the hamburger menu itself become X, in css I have the corresponding webkits. I have to mention that I'm using Bootstrap 3.3.7 but that shouldn't affect execution.
I leave you the GIF images that illustrate the problem well.
Chromium runs the code just fine (Safari runs it that way too).
HTML code referring to the navbar:
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<div class="animated-icon1">
<span></span>
<span></span>
<span></span>
</div>
</button>
<a class="navbar-brand" href="/" id="mybrand">
<p><img src="img/miT.png" alt="Logo Toni" id="mylogo">
<span id="textomylogo">oni RZV</span></p>
</a>
CSS code that controls the hamburger:
.animated-icon1, .animated-icon2, .animated-icon3, .animated-icon4 {
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.animated-icon1 span, .animated-icon3 span, .animated-icon4 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.animated-icon1 span {
background:var(--colorE);
}
.animated-icon3 span {
background: var(--colorE);
}
.animated-icon4 span {
background:#2F2D2D;
}
.animated-icon1 span:nth-child(1) {
top: 0px;
}
.animated-icon1 span:nth-child(2) {
top: 10px;
}
.animated-icon1 span:nth-child(3) {
top: 20px;
}
.animated-icon1.open span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.animated-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
.animated-icon1.open span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
/* Icon 3*/
.animated-icon3 span:nth-child(1) {
top: 0px;
}
.animated-icon3 span:nth-child(2), .animated-icon3 span:nth-child(3) {
top: 10px;
}
.animated-icon3 span:nth-child(4) {
top: 20px;
}
.animated-icon3.open span:nth-child(1) {
top: 11px;
width: 0%;
left: 50%;
}
.animated-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.animated-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.animated-icon3.open span:nth-child(4) {
top: 11px;
width: 0%;
left: 50%;
}
/* Icon 4 */
.animated-icon4 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon4 span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon4 span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon4.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0px;
left: 8px;
}
.animated-icon4.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
.animated-icon4.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 21px;
left: 8px;
}
JS code
var myLogoSize = function(){
if (flagLogo==true) {
$('#mylogo').animate({ width: '35px'},'slow');
flagLogo=false;
}
else {
$('#mylogo').animate({width: '50px'},'slow');
flagLogo=true;
}
}
$(function(){
//Animación icono menú.
$('.animated-icon1').click(function(){
$(this).toggleClass('open');
myLogoSize();
});
}
Using
Firefox v59.0 (64bits) on Windows 10
what I could see is that when doingclic
on the element<div class="animated-icon1"
nothing happens, this is because the element is notclicable
.Solution:
If
click
we subscribe to the event<button
, everything works correctly.Code:
demonstration: