Transition from "Icon" to "X" in Navigation dropdown with icons possible?

[quadinfotech]

Hi,

In Header > “Navigation Dropdown” is it possible to have the transition from icon to the X to close the submenu?
The secondary is just a hover… Would like to have the X only visible when the dropdown is open

Cheers,

[friech]

Hi There,

Thank you for writing in, yes that is possible, instead of icon please use the burger. That is the one that has the X animation on click/tap.

Hope it helps,
Cheers!

[quadinfotech]

Hi,

Thank you for writing back.
I know about that option and tried it but we’re only limited to 4 icons. I want a down arrow like it is on the website now.
Also, it doesn’t work on iOS devices. When testing it, it only changed the color of the icon and the X didn’t show up.

Cheers

[rad]

Hi @quadinfotech,

That’s possible, you can try this

But, there is no animation or transition since it’s a whole icon compared to burger type where it contains multiple parts.

Thanks!

[quadinfotech]

Hi @rad,

Thank you for the details.
I had to switch to Navigation inline to have the hover effect on desktops and unfortunately it doesn’t suggest that option anymore in the Sub Indicator.

[rad]

Hi @quadinfotech,

That’s right, it’s meant for navigation dropdown’s toggle icon. And Inline navigation doesn’t have that option. You can switch back to dropdown navigation.

Thanks!

[quadinfotech]

Thanks @Rad!
Actually, I didn’t change it on the mobile version. I’m using Navigation Dropdown with Graphic Toggle.

If you can test it on an iOS device, you’ll see the transition from “More Vertical” to X does not work.
It would perfectly on Android devices.

[nabeel]

Hi again,

You can fix the mobile transition issue via CSS, just add the following code in the Theme Options > CSS:

.touchevents .x-masthead .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: 40px;
    opacity: 1;
    transform: rotate(90deg);
    transition: all 0.5s;
}

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

.touchevents .x-masthead .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: all 0.5s;
    transform: rotate(0deg);
}

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

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

Please note that this will change for all mobile devices iOS and Android devices.

Hope this helps!

[quadinfotech]

Thank you @Nabeel !

It worked perfectly.

Cheers

[jade]

You’re most welcome!