Unable to change search icon in navigation

I see. Thank you for clarifying.

Try this instead:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'arrow' === $icon ) {
        $svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><g class="nc-icon-wrapper" fill="#000000"><path d="M381.9 388.2c-6.4 27.4-27.2 42.8-55.1 48-24.5 4.5-44.9 5.6-64.5-10.2-23.9-20.1-24.2-53.4-2.7-74.4 17-16.2 40.9-19.5 76.8-25.8 6-1.1 11.2-2.5 15.6-7.4 6.4-7.2 4.4-4.1 4.4-163.2 0-11.2-5.5-14.3-17-12.3-8.2 1.4-185.7 34.6-185.7 34.6-10.2 2.2-13.4 5.2-13.4 16.7 0 234.7 1.1 223.9-2.5 239.5-4.2 18.2-15.4 31.9-30.2 39.5-16.8 9.3-47.2 13.4-63.4 10.4-43.2-8.1-58.4-58-29.1-86.6 17-16.2 40.9-19.5 76.8-25.8 6-1.1 11.2-2.5 15.6-7.4 10.1-11.5 1.8-256.6 5.2-270.2.8-5.2 3-9.6 7.1-12.9 4.2-3.5 11.8-5.5 13.4-5.5 204-38.2 228.9-43.1 232.4-43.1 11.5-.8 18.1 6 18.1 17.6.2 344.5 1.1 326-1.8 338.5z"></path></g></svg>';

        return sprintf(
            '<span class="gp-icon %1$s">
                %2$s
            </span>',
            $icon,
            $svg
        );
    }

    return $output;
}, 15, 2 );

Thanks, it worked.
But the only issue is that the arrows turn left when the menu item is opened.
I want it to turn downwards (arrow-down).

Another thing I noticed is that the last sub-menu item overlaps with the next menu-item. This happens only in mobile.
I tried adjusting height in the Customization options, but nothing helped.

Check this screenshot

try adding this CSS to change the open arrow rotation:

nav.toggled .sfHover > a > .dropdown-menu-toggle .gp-icon svg {
    transform: rotate(90deg);
}

Thanks. It worked.

What about the other problem?

The "sub menu item" is covering the next "menu item" in mobile.

Can you disable your cache plugin to test? It seems some of GP's style gets blocked.

Okay, I only use Ezoic Leap for cache. I've disabled it for now. Please do let me know as soon as you have done checking so that I enable it again later.

How is it looking now from your end? The issue isn't occurring from my end viewing your site on mobile with Ezoic disabled.

Can you take a screenshot?

Hi, I'm still seeing the issue. I checked in mobile in Incognito.

Please open Blog>>Articles>>

Then you'll see that inside Articles, the last item is very close to the next Menu Item.

I'v already shared the screenshot above. It's the same. No changes.

It's not overlapping. It's just that it's very close to the next menu item. It should maintain proper space.

Note: The problem happens only in mobile. Not desktop.

I see.

There's a specific line in your custom code that's causing the issue.:

.main-navigation ul ul {
	left: auto;
	transition: opacity 300ms ease-in-out, transform 200ms ease-in-out, height 200ms ease-in-out;
	transform: translateY(20px);
	height: auto;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 5px;
	padding: 5px 0;
}

This line to be specific:

transform: translateY(20px);

Can you try removing this line?

Perfect. It solved the issue.

Remember before this, I asked to turn the arrows downward when the menu is opened?

That only worked on mobile. The menu-arrow doesn't turn downward in Desktop.

I see. Try adding this CSS:

.main-nav span[aria-expanded="true"].dropdown-menu-toggle > .gp-icon svg {
    transform: rotate(90deg);
}

Hi, that worked. Thanks.

Is there a way to rotate the same icon?

It seems the two SVG icons switch instantly. The rotation animation isn't smooth.

It's alright, but it'd be great if it looked smoother.

Moreover, it seems to be rotating anti-clockwise. It should rotate clockwise 90 degree.

Try adding this CSS:

.main-nav span.dropdown-menu-toggle > .gp-icon svg {
    transition: transform 0.5s ease;
}