Toggle button of dropdown menu does not change to X on IOS

Support
#1

I have an odd problem with dropdown menue on IOS devices. Same as in this already closed post:

I post this as new issue since it is still not resolved, 9 months later.

1 Like
#2

Hi Mikael,

Thank you for reaching out to us. With regards to toggles on certain devices (older mobile specifically), the toggle animation is disabled on some of these due to their inability to handle our two-stepped animation system properly. On some of those older devices, once the animation is triggered it runs constantly and does not respect the animation-play-state: paused; declaration when the animation-name is removed from inline styles via JavaScript. Because of this, we simply don’t animate it on some older devices

As a work around you can give your mobile menu a class e.g mobile-toggle-btn then add the following code in the Theme Options > CSS:

.touchevents .x-masthead .mobile-toggle-btn.x-anchor-toggle.x-active .x-graphic:before {
    content: '\f00d';
    display: inline-block;
    font-style: normal;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "FontAwesome";
    font-weight: 400;
    font-size: 25px;
    opacity: 1;
    transform: rotate(90deg);
    transition: transform 0.5s;
    color: #fff !important;
    width: 18px;
}

.touchevents .x-masthead .mobile-toggle-btn.x-anchor-toggle.x-active .x-graphic span {
    display: none;
}

.touchevents .x-masthead .mobile-toggle-btn.x-anchor-toggle .x-graphic:before {
    content: '\f00d';
    display: inline-block;
    font-style: normal;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "FontAwesome";
    font-weight: 400;
    font-size: 40px;
    opacity: 0;
    transition: transform 0.5s;
    transform: rotate(0deg);
}

.touchevents .x-masthead .mobile-toggle-btn.x-anchor-toggle .x-graphic {
    margin-top: -40px;
}

.touchevents .x-masthead .mobile-toggle-btn.x-anchor-toggle.x-active .x-graphic {
    margin-top: 0px;
}

.touchevents .x-masthead .mobile-toggle-btn.x-anchor-toggle .x-anchor-particle-primary {
    color: transparent !important;
}

Please note that this is only a work around which will change the mobile toggle animation in all touch devices and further customization from here would be getting into custom development which is regretfully outside of our support scope.

Thanks!

#3

Hi,

I don’t consider an iPhone 6s an ‘older’ device.
Actually it runs the latest iOS.
It’s also happening to an iPad 4th gen.

I don’t understand.
Either its hardware issue or software issue.
Which is it?

#4

Hey @gtaranti,

This is device-specific as this has been tested in newer models and it works.

We understand your opinion but it’s only a fact that previous models don’t support the technology used for this feature.

Thank you for understanding.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.