Change social icons order and category submenu popup dimensions

Hello,

My website currently has fb, ig, pin, and wa icons, but I want to change the order of them
I tried some code I found here on the forum, but didn’t work

I also need to change the submenu popup dimensions, because it’s currently a very long list (image attached privately)

Attachments:

You must be logged in to view attached files.

Hi contato-9917,

Thanks for reaching to us.

First of all, I’m really appreciate your patience.

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

/* Socials order */
.wd-social-icons {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.wd-social-icons .social-whatsapp {
	order: 1;
}

.wd-social-icons .social-pinterest {
	order: 2;
}

/* Mega menu */
.elementor-widget-wd_mega_menu .wd-dropdown-menu{
	height: 300px;
	overflow: hidden;
	overflow-y: scroll;
}

Regards,

Hello,

Thank you so much for replying.

The Custom CSS for the icons didn’t work, but the one for the mega menu did work, and I appreciate it.

If you can fix the icon order for me, I would be so grateful.

Also, I would like to know how would be possible to do a mega menu like the screenshot attached.

Thanks!

Attachments:

You must be logged in to view attached files.

Hi contato-9917,

1. Please provide URL of the mentioned page, so I can take a closer look.

2. Mega Menu

Please read and follow the instructions here https://xtemos.com/docs-topic/create-mega-menu/

Regards,

Hello,

Sorry for the delayed responde, I took a break these last days.

All info is attached privately

Thanks 🙂

Hi contato-9917,

1. Social icons order

It seems you are referring to icons in the header. If so, I checked the code and it worked. Please try to apply order to facebook icon as well to see the changes.

2. Side menu

You can create a dev site and import any template there, then with the help of the import functionality of Elementor you can export HTML Blocks, more detail is here: https://elementor.com/help/template-library/

Devsite – also called a Staging platform where you can test issues, enable/disable features/plugins thus such changes will affect the main site. The below article will help you to create it:

https://www.wpbeginner.com/wp-tutorials/how-to-create-staging-environment-for-a-wordpress-site/

Then, please read our documentation on how to import/export header:

https://xtemos.com/docs-topic/how-to-export-import-headers/
https://xtemos.com/docs-topic/create-mega-menu/

Regards,

Hello,

1 – Applying to FB and IG also, worked. Thank you!

2 – The website I sent as an example of what I want my menu to look like, is not owned by me.
I’ll try to play with Elementor and find out how to make it

Thank you!

Hi contato-9917,

Keep us in mind for future questions and concerns, we’re always here to help!

Regards,

[Author]

Posts