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.