Create a slide-out social menu in Elementor

Introduction

Are you looking to add floating social media icons or share buttons to your Elementor website? This guide will take you through a step-by-step process for creating a slide-out social icons menu for your social media links on your pages or social share buttons for your blog posts.

One thing to note is that, while it may look great on desktops, it might not look so good on mobile. So you might need to responsively hide it for mobile devices

Adding Social Media Icons to Your Website

Add an icon list widget to the page

First, you need to add an Icon List widget to your page.

Icon List Properties

Under the Content Tab settings, set the layout to Default (multi-line).

You can then input the necessary social icons, text and links for your social media pages, like Facebook, Twitter, etc., as list items.

For the styling, we’ll be using custom CSS to customise the colour and font size for the icons and text to keep everything consistent, so ensure that you remove all default settings such as the icon size, colour etc.

But if you wish, you can go ahead to use the Elementor UI settings to style those properties.

Block Class: Under the advanced tab, give the icon list widget a “Block” CSS class name of "dd-s-sidebar"

Modifier Class: Then, depending on what position you want the sidebar to be on, give it a modifier class of either “dd-s-sidebar--left” or “dd-s-sidebar--right“

Icon List Custom CSS

After all the preliminary UI settings have been done, we’ll use custom CSS to style the rest. Remember to change the values to suit your needs.

/* ||-- General Properties to change --|| */
.dd-s-sidebar{
    /* Background and Text Properties */
    --dd-text-padding-left: .5em;
    --dd-text-padding-right: .5em;
    --dd-text-clr: #fff;
    --dd-bg-clr: #121212;
    --dd-vertical-position: 50%;
    
    
    /* Icon Properties */
    --dd-icon-fontsize: 1rem;
    --dd-icon-bg-size: 2em;
    --dd-icon-clr: #f7f7f7;
    --dd-icon-bg-clr: #a712b0;
    --dd-icon-hover-clr: #ffffff;
    --dd-icon-hover-bg-clr: hotpink;
}


/* ||-- No need to modify --|| */
.dd-s-sidebar{
    right: 0;
    left: auto;
}
.dd-s-sidebar--right{
    right: 0;
    left: auto;
    --dd-x-transform: calc(100% - var(--dd-icon-bg-size));
    --dd-hover-x-transform: 0;
}

.dd-s-sidebar--left{
    right: auto;
    left: 0;
    --dd-x-transform: calc(-1 * 100% + var(--dd-icon-bg-size));
    --dd-hover-x-transform: 0;
}

.dd-s-sidebar--left a{
    flex-direction: row-reverse;
}

.dd-s-sidebar {
    position: fixed;
    top: var(--dd-vertical-position);
    transform: translateY(-50%);
    z-index: 999;
    width: fit-content;
}
/* Styles for each list item */
.dd-s-sidebar .elementor-icon-list-items .elementor-icon-list-item {
    background-color: var(--dd-bg-clr, #141414);
}
.dd-s-sidebar .elementor-icon-list-items .{}


/* Styles for icon */
.dd-s-sidebar .elementor-icon-list-items .elementor-icon-list-icon {
    --_dd-icon-bg-size: var(--dd-icon-bg-size, 2em);
    --_dd-icon-bg-clr: var(--dd-icon-bg-clr);

    /* Icon Box Styles */
    width: var(--_dd-icon-bg-size);
    aspect-ratio: 1 / 1;
    padding: .5em;
    align-items: center;
    justify-content: center;
    background-color: var(--_dd-icon-bg-clr);
}

.dd-s-sidebar .elementor-icon-list-items .elementor-icon-list-icon :where(svg, i){
    /* Icon Styles */
    --_dd-icon-fontsize: var(--dd-icon-fontsize, var(--e-icon-list-icon-size, 1em));
    --_dd-icon-clr: var(--dd-icon-clr, #fff);
    margin: 0;
    font-size: var(--_dd-icon-fontsize);
    width: var(--_dd-icon-font-size);
    color: var(--_dd-icon-clr);
    fill: var(--_dd-icon-clr);
}

.dd-s-sidebar .elementor-icon-list-item:where(:hover, :focus-within){
        /* Icon Hover Styles */
    --dd-icon-clr: var(--dd-icon-hover-clr);
    --dd-icon-bg-clr: var(--dd-icon-hover-bg-clr);
}

/* Styles for .elementor-icon-list-text */
.dd-s-sidebar .elementor-icon-list-items .elementor-icon-list-text {
    color: var(--dd-text-clr, #fff);
    padding-inline: .5em;
}

/* Initial Offscreen Positioning */
.dd-s-sidebar .elementor-icon-list-items .elementor-icon-list-item {
    --_dd-x-transform: var(--dd-x-transform, 0);
    transform: translateX(var(--_dd-x-transform));
    transition: all 0.2s ease;
}
.dd-s-sidebar .elementor-icon-list-item:where(:hover, :focus-within){
    --dd-x-transform: var(--dd-hover-x-transform);
}