[Resolved] Strange character next to drop-down arrow in off-canvas panel

[Chris]

Hello!

I’m building a new site for a client, and for some reason on mobile the off-canvas panel shows a strange character next to the drop-down arrow, as seen in the Image Here.

There are no issues on desktop, and I have not seen this on any other sites I have built before, although I have not used the theme with a template that had Elementor.

Your help is appreciated!

[Elvin]

Hi Chris,

Try changing the icon type of the theme to SVG.

To do this, go to Appearance > Customize > General and set the Icon type on the dropdown to “SVG” as shown here – https://share.getcloudapp.com/YEuO1oRR

[Chris]

Elvin, thanks for the laser response. It is already selected as SVG.

[Elvin]

I’ve rechecked the page again to confirm and this is what’s adding the weird character. It’s a custom CSS added on Appearance > Customize > Additional CSS.

	.main-navigation .dropdown-menu-toggle:before {
		content: "\f107" !important;
	}

Any particular reason why this is added? If it’s not used, it’s best to remove it. 🙂

[Chris]

Interesting. I do not know why that is there. I went ahead and removed it.

I’m wondering if I should also remove the next section:

.main-navigation .sfHover > a .dropdown-menu-toggle:before {
content: “\f106” !important;
}

[Elvin]

It looks like something that’s supposed to show beside the hamburger menu.

You can remove it and save it elsewhere and check the site if some icons are missing.

If it doesn’t have any discernable effect on the site then perhaps it’s actually not being used.

Removing that shouldn’t break the site as CSS doesn’t affect backend functionality incase you’re worried. 😀

[Chris]

Awesome, thanks again for your help!

[Elvin]

No problem. 😀

[Author]

Posts