Simple opt-in bar with social media icons (including WhatsApp)

Hi there,

I am assuming you are using Font Awesome for the icons, if not let me know what, so create a new Hook Element. Add this markup and update accordingly:

<div class="social-bar">
    <div class="grid-container">
        Some text
        <a href="your link here"> <i class="fa fa-linkedin-square fa-4x"></i></a>
        <a href="your link here"> <i class="fa fa-twitter-square fa-4x"></i></a>
        <a href="your link here"> <i class="fa fa-facebook-square fa-4x"></i></a>
    </div>
</div>

Select the after_footer hook. And set your display rules.

Then add this CSS and adjust accordingly:

.social-bar {
    padding: 5px;
    background-color: #cccccc;
}

.social-bar .grid-container {
    display: flex;
    justify-content: space-around;
}

Did you want this fixed to the bottom of the site? If so ill edit the CSS

Thanks, David. I am now using Font Awesome. To be clearer, this is what I am trying to achieve

http://bit.ly/2BOxKtR

I want it to work like the static FB bar that sits as the bottom of the page and is present as the user scrolls up and down.

Is this possible with the Hooks Elements?

Try this:

1. Appearance > Elements --> New Hook.
2. Select the after_footer hook
3. Set you display rules to Entire Site.
4. Add this HTML in the Hook Content, update the FA Icons form the FA font library and add your URLs in place of the #:

<div class="social-bar">
    <div class="grid-container">
        <a href="#"> <i class="fa fa-linkedin-square fa-4x"><span>Label</span></i></a>
        <a href="#"> <i class="fa fa-linkedin-square fa-4x"><span>Label</span></i></a>
        <a href="#"> <i class="fa fa-linkedin-square fa-4x"><span>Label</span></i></a>
        <a href="#"> <i class="fa fa-linkedin-square fa-4x"><span>Label</span></i></a>
        <a href="#"> <i class="fa fa-linkedin-square fa-4x"><span>Label</span></i></a>
    </div>
</div>

Then add this CSS:

body {
	margin-bottom: 60px; /* Offset height of social bar */
}
.social-bar {
	background-color: #fff; /* Background color */
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}

.social-bar .grid-container {
	display: flex;
}
.social-bar a {
	flex: 1 0 20%; /* based on 5 icons - 4 icons = 25% etc */
}
.social-bar a i {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1 0 20%;
	font-size: 24px; /* Icon Size */
	padding: 10px
}
.social-bar a i span {
	font-size: 0.5em; /* text set to half of icon size */
	margin-top: 5px;
}

Amazing, thank you!!

You're welcome

Hi again,

I am still using this scroller that you helped me with, thank you. I would like to hide it on one page though. Is that possible and, if so, how do I do it please?

Thanks

Grant

Hello,

I worked it out - Display Rules on the Hook. No need to respond.