Adding Social Icons to Elementor Menu

Categories: Coding, Design, Elementor, Hints and Tips

Elementor Pro is great, but one of the things it won’t let you do natively is add your social icons to the menu. We’re going to see how to do it by adding some CSS rules within the Elementor interface.

Skip to summary and code

First let’s go to the theme builder to see our header templates

I have 3 headers set up. Let’s go in and edit one.

Here’s my basic 2-column header with logo and menu

If we try to add social icons in the menu we’ll run into trouble, and one will be displayed below the other instead of side-by-side. That’s because the containers of both are set to 100% of the width of the column.

In order to make the icons sit to the left of the menu, we need to make both these containers the width of their content, which we do by changing their width property from 100% to auto.

First I’ll edit the social icons widget. Let’s go to Custom CSS in the editor.

Add the following CSS into the Custom CSS window (there is copy/pastable code at the end of the post).

Now the blue box shows that the widget area is the width of the content, not the full width of the column.

Now we add exact same CSS for the menu, and they will display side-by-side.

We’re getting there, but despite the vertical align for the column being set to center, the social icons are a little higher. This is because as far as Elementor is concerned they’re still on top of the menu, so it automatically adds some bottom margin.

To counteract this, we’ll remove any bottom margin in the CSS for both elements

And now we’ve got the result we want.

We probably want to add some padding to the right of the social icons, but we can do that in the normal way.

A 20px right margin gives us just the right amount of separation.

Lastly, I’m going to drag the column widths right over to the left. This way, if we or the user adds more menu items in the future, the social icons will continue to sit just to the left of the menu, regardless of how many items it contains.

Summary and Code

In your header template, place the social icons on top of the menu in a column, and add the following custom CSS to both elements

selector {
    width: auto;
    margin-bottom: 0;

Adjust the right-hand margin of the social icons to give them some space, then ensure your right-hand column is as large as it can be.

Can I Help?

I hope you found this article useful. I'm always available to help with any web questions or issues you have, and offer a wide range of services from simple by-the-hour tweaks and repairs through to fully custom websites. I'm a WordPress specialist and can fix or modify your WordPress installation or build in new functionality. I also offer a free website review (see below) to see where the web could be working harder for your business.

Click here to drop me a line today with any questions or anything you'd like to discuss. I'm here to help!

Free Website Review

Do you wonder whether your website is doing you justice? I look at your website, search engine rankings, social media and reviews, and let you know where you could be leveraging your online presence to do more for your business.

My PDF report is 1000 words written specifically for you. I'll tell you simple, easy wins you can do quickly and for free, through to what you might want to consider if you redesigned your web presence. It's completely free and comes with no obligation other than to tell other people if you find it useful.

Click here to get your free website review