[Support request] How to change dropdown arrows only in mobile header

[_blank]

I need to change the dropdown menu toggle arrow svgs for the mobile menu only. I’m using GP Premium and have the Mobile Header option enabled.

I thought the generate_svg_icon_element or generate_svg_icon filters would be what I needed by using a condition like if ( 'arrow' === $icon ) but this changes the toggle arrows for the desktop and mobile menus. I haven’t found a way to use this filter to change only the output for the mobile dropdown menu toggles.

I’m hoping to avoid using css to hide and style the dropdown menu toggles for mobile, and instead change the html output of the icons. Similar to what’s in these articles:
https://docs.generatepress.com/article/generate_svg_icon/
https://docs.generatepress.com/article/generate_svg_icon_element/

[Ying]

Hi Paul,

You can give this condition a try: https://developer.wordpress.org/reference/functions/wp_is_mobile/

[_blank]

Thanks Ying. I read the documentation for that condition but it doesn’t quite look like what I need.

This checks the user agent. So it wouldn’t work on a desktop browser where the window is at a narrow enough width for the mobile menu to become visible.

Is there a way to use one of the filters I mentioned to change the output for just the mobile menu dropdown toggle arrows? Or some other way I can achieve this?

[Ying]

Is there a way to use one of the filters I mentioned to change the output for just the mobile menu dropdown toggle arrows?

No, I don’t think so. As desktop and mobile are using the SVG icon.

So it wouldn’t work on a desktop browser where the window is at a narrow enough width for the mobile menu to become visible.

I don’t see a point using a narrow window on desktop other than testing, do I miss anything?

[_blank]

I don’t see a point using a narrow window on desktop other than testing, do I miss anything?

That’s a valid point. I just want the mobile menu to display consistently no matter what. So I’m not styling it according to device.

[Ying]

Sure!

[Author]

Posts