A better Monarch social sharing bar


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

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

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.

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.

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

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_livejournal
.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

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.

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.

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

On mobile we are going to hide all of our button except the show all button, so let’s start adding our mobile CSS.

 

And then we just need to align our button to the edge and change the button size.

The thing we need to do is make sure our footer is still visible on mobile devices.

All the CSS

I hope you like this style for social sharing bar and that you will find a use for it in one of your

4 Comments

  1. Alex

    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!

    Reply
  2. Mark

    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.

    Reply
  3. Dani

    Its possible dont show monarch buttom in some webpage??

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Divi Stride is a Divi Third Party developer, we spend countless hours building tools and resources for the Divi Community.

We are the creators of Section Style Manager (the 5th Divi Plugin to be released), Divi Commerce & Tighten.

Support: support@divistride.com
Support Days: Monday - Thursday

| 18 minutes

Pin It on Pinterest

Share This