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.
- 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;
}
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;
}
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;
}
CSS Snippet
#main-footer{
margin-bottom:70px;
}
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) {
}
Monarch Social buttons CSS classes
.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_newsvine
.et_social_aol
.et_social_gmail
.et_social_printfriendly
.et_social_yahoomail
.et_social_amazon
.et_social_delicious
.et_social_vkontakte
.et_social_linkedin
.et_social_myspace
.et_social_blogger
.et_social_stumbleupon
.et_social_tumblr
.et_social_like
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;
}
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;
}
Mobile CSS:
Let’s add a media query for our mobile CSS to go in
CSS Snippet
@media(max-width:740px) {
}
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;
}
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;
}
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??