Change Expand / Collapse Icons in Mobile Dropable Menu

Hello,

First of all, I shall say I liked your theme a lot.

Said that, I have following request. if you go to my website in Mobile Interface and select menu bars, you will see Menu, and in that Menu you will see “Tienda” which is dropable. Could you please tell how can I modify those Icons for expanding and collapsing dropable Menus? Specially the “Cross Icon”. Would prefer if for Collapsing Menu I can use same as expanding but in Opposite direction.

Hello,

Thank you so much for purchasing our theme and contacting our support center.

Currently, your website is under maintenance mode and we don’t see it. Please, disable this plugin first and provide us some screenshots for a better explanation.

Kind Regards
XTemos Studio

Thanks for quick reply. Sure I have already disabled maintenance mode, so you can see.

Please see attached screenshot, what we want to change is the white cross inside the orange square, for arrow that displays when expanding but in opposite direction.

Attachments:

You must be logged in to view attached files.

Hi,

Try to add the following code snippet to the Custom CSS area in Theme Settings.

body .mobile-nav .icon-sub-menu:before {
	content: "\e604";
	font-family: "simple-line-icons";
	color: white;
	font-size: 16px;
	margin-top: -7px;
	transform: none;
	-webkit-transform: none;
	background-color: transparent;
	width: auto;
	height: auto;
	left: 15px;
	right: auto;
}

body .mobile-nav .icon-sub-menu.up-icon:before {
	-webkit-transform: rotate(180deg);
	background-color: rotate(180deg);
	margin-top: -10px;
}

body .mobile-nav .icon-sub-menu:after {
	display: none;
}

Regards

Thanks for your quick reply.

I have already put that code inside Custom CSS but still not showing as desired. I attach image of how I would like to show when expanded or collapsed. Could you please help me in order to do so?

Attachments:

You must be logged in to view attached files.

But after the custom code was applied your site mobile menu icon is already looked as you described. Please check the video (https://gyazo.com/e29457ee7b3e8721d187772da78cdc47)

Regards

Hi,

Thanks for your quick reply. Sorry I think I did not refresh Website do thats the reason it did not show.

I have one more small request, would be possible to remove that orange color surronding arrow icon when dropable menu is expanded, just that it looks like the image I attached in previous post?

Hello,

Please add this code to the Theme Settings > Custom CSS:

.mobile-nav ul li .up-icon{
background:transparent;
}

Best Regards

Thank you so much.

I just needed to add “body” before just like:

Hello,

Please add this code to the Theme Settings > Custom CSS:

body .mobile-nav ul li .up-icon{
background:transparent;
}

but it works fine thank you very much.

Regards

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts