Over the last few months across a bunch of sites I read articles on I’ve noticed that they had a really nice fixed social sharing bar at the bottom of their pages, because I really liked the style and have had a few clients lately who have wanted to focus on creating some content I decided to try to achieve this style with the Monarch Plugin (You can see the result of this idea at the bottom of the screen) so today I’m going to help you achieve this style.
Setting up monarch:
If you don’t have Monarch installed then you should install it now, so that we can begin to setup our social sharing bar.
You need to pick 5 main social media channels that you would want for your content to be shared on. Once you have selected your 5 social media channels, we are going to click on the inline location and set the social sharing bar up.
These are the setting you will need for the sharing bar, you can also choose which post types you want to display it on.
- Choose location: Below content
- icon alignment: Left
- Number of Columns: 6
- Display share count: No
- Display total Shares: Yes
- Display network name: Yes
- Display “all networks” button: Yes
The CSS:
First thing we are going to align is the container which holds the bottom social sharing bar to the bottom of the page
CSS Snippet
.et_social_inline_bottom{
background:#fff;
position:fixed;
bottom:0!important;
left:0px;
width:100%;
padding-left:1.5%;
padding-right:1.5%;
padding-top:1%;
padding-bottom:0.5%;
z-index:9999;
margin-bottom:0px!important;
}
Next, we want to make the total share count and the social buttons sit next to each other instead of being stacked on top of one another so let’s add the following CSS classes
CSS Snippet
.et_social_inline_bottom .et_social_totalcount{
width:8%!important;
float:left;
}
.et_social_inline_bottom .et_social_icons_container{
width:92%!important;
float:left;
}Now the next thing we need for desktop is to make the total count look nicer, for me I just wanted to center the total counts text.
CSS Snippet
.et_social_inline_bottom .et_social_total_share{
width:100%!important;
min-width:100%;
max-width:100%;
float:none;
text-align:center!important;
}
.et_social_inline_bottom .et_social_totalcount_label {
width:100%;
float:none;
padding-top:2%;
text-align:center;
}The only problem now is that the bar will be covering our footer, so to fix this we just need to add a margin-bottom to our footer.
CSS Snippet
#main-footer{
margin-bottom:70px;
}Next, we going to start to make the bar more responsive on smaller screen sizes.
Tablet CSS
Let’s start with some CSS for tablets, first thing we going to do is add a media query for just tablets, All the tablet CSS is going to inside this media query
CSS Snippet
@media(min-width:768px) and (max-width:980px) {
}The main thing we going to do on tablet and mobile will be hiding certain buttons, to make sure everything fit nicely
Monarch Social buttons CSS classes
.et_social_facebook
.et_social_twitter
.et_social_googleplus
.et_social_buffer
.et_social_digg
.et_social_evernote
.et_social_pinterest
.et_social_friendfeed
.et_social_hackernews
.et_social_twitter
.et_social_googleplus
.et_social_buffer
.et_social_digg
.et_social_evernote
.et_social_pinterest
.et_social_friendfeed
.et_social_hackernews
.et_social_livejournal
.et_social_newsvine
.et_social_aol
.et_social_gmail
.et_social_printfriendly
.et_social_yahoomail
.et_social_amazon
.et_social_delicious
.et_social_newsvine
.et_social_aol
.et_social_gmail
.et_social_printfriendly
.et_social_yahoomail
.et_social_amazon
.et_social_delicious
.et_social_reddit
.et_social_vkontakte
.et_social_linkedin
.et_social_myspace
.et_social_blogger
.et_social_stumbleupon
.et_social_tumblr
.et_social_like
.et_social_vkontakte
.et_social_linkedin
.et_social_myspace
.et_social_blogger
.et_social_stumbleupon
.et_social_tumblr
.et_social_like
To do this you will need to add this CSS class “.et_social_inline_bottom” and one of the above monarch classes and if you adding more after the class you will need to add “,” at the end at the end, if you’ve used the same social network as our site you can copy the code as is.
So first let’s hide 4 of the social buttons which you don’t consider the most important for your brand, for us Facebook and Twitter are the most important social networks to use, so these are the two buttons that I want to display.
CSS Snippet
.et_social_inline_bottom .et_social_googleplus, .et_social_inline_bottom .et_social_pinterest,.et_social_inline_bottom .et_social_linkedin{
display:none!important;
}Now we will need make our buttons take up more of the empty space and change it alignments, so that the buttons are on the right hand side of screen.
CSS Snippet
.et_social_inline_bottom .et_social_icons_container{
width:80%!important;
float:right;
}
.et_social_inline_bottom .et_social_all_button, .et_social_inline_bottom .et_social_facebook, .et_social_inline_bottom .et_social_twitter{
width:30%!important;
}All that left now is to make our social sharing bar to work well on mobile phones, once we’ve done this our new social media bar will be completed.
Mobile CSS:
Let’s add a media query for our mobile CSS to go in
CSS Snippet
@media(max-width:740px) {
}On mobile we are going to hide all of our button except the show all button, so let’s start adding our mobile CSS.
CSS Snippet
.et_social_inline_bottom .et_social_googleplus, .et_social_inline_bottom .et_social_pinterest,.et_social_inline_bottom .et_social_linkedin, .et_social_inline_bottom .et_social_facebook, .et_social_inline_bottom .et_social_twitter{
display:none!important;
}And then we just need to align our button to the edge and change the button size.
CSS Snippet
.et_social_inline_bottom .et_social_icons_container{
width:30%!important;
float:right;
}
.et_social_inline_bottom .et_social_all_button{
width:100%!important;
min-width:100%!important;
} The thing we need to do is make sure our footer is still visible on mobile devices.
CSS Snippet
#main-footer{
margin-bottom:70px!important;
}All the CSS
CSS Snippet
/* ----- ALL DEVICES ----- */
.et_social_inline_bottom{
background:#fff;
position:fixed;
bottom:0!important;
left:0px;
width:100%;
padding-left:1.5%;
padding-right:1.5%;
padding-top:1%;
padding-bottom:0.5%;
z-index:9999;
margin-bottom:0px!important;
}
.et_social_inline_bottom .et_social_totalcount{
width:8%!important;
float:left;
}
.et_social_inline_bottom .et_social_icons_container{
width:92%!important;
float:left;
}
.et_social_inline_bottom .et_social_total_share{
width:100%!important;
min-width:100%;
max-width:100%;
float:none;
text-align:center!important;
}
.et_social_inline_bottom .et_social_totalcount_label {
width:100%;
float:none;
padding-top:2%;
text-align:center;
}
#main-footer{
margin-bottom:70px!important;
}
/* ----- TABLETS ----- */
@media(min-width:768px) and (max-width:980px) {
.et_social_inline_bottom .et_social_googleplus, .et_social_inline_bottom .et_social_pinterest,.et_social_inline_bottom .et_social_linkedin{
display:none!important;
}
.et_social_inline_bottom .et_social_icons_container{
width:80%!important;
float:right;
}
.et_social_inline_bottom .et_social_all_button, .et_social_inline_bottom .et_social_facebook, .et_social_inline_bottom .et_social_twitter{
width:30%!important;
}
}
/* ----- MOBILES ----- */
@media(max-width:740px) {
.et_social_inline_bottom .et_social_googleplus, .et_social_inline_bottom .et_social_pinterest,.et_social_inline_bottom .et_social_linkedin, .et_social_inline_bottom .et_social_facebook, .et_social_inline_bottom .et_social_twitter{
display:none!important;
}
.et_social_inline_bottom .et_social_icons_container{
width:30%!important;
float:right;
}
.et_social_inline_bottom .et_social_all_button{
width:100%!important;
min-width:100%!important;
}
#main-footer{
margin-bottom:70px!important;
}
}
Hi James, great trick and write-up!
I’m trying to implement this effect only on the blog posts to leave the more commercial pages clean.
Do you know how I could exclude #main-footer margin styling from impacting my pages?
Thanks!
It actually quite simple all you have do is add this CSS class in front of all the CSS classes in this tutorial .single-post, for future reference to make change to only to specif pages or post type look at this post https://www.boltthemes.com/changing-wordpress-specific-page-items/
Hi James,Nice article I have a question? I use the Monarch plugin and i use the floating social bar on left side but im trying to adjust the margin so i can move it down to look more proffesional…i tried looking at all the CSS but no luck would you know what the CSS code would be thanks.
Its possible dont show monarch buttom in some webpage??