I have looked at a number of ways of adding social media buttons on a website and purchased some stacks that help with this but I wanted to have a bar displaying on the left with a larger display but for them to move to the bottom if on a mobile phone.
At https://www.w3schools.com/howto/howto_css_sticky_social_bar.asp they have sample code to achieve the former but I wonder if someone can advise me how to check if it is a mobile device and then display this at the bottom as a sticky bar.
I found that with responsive themes, the sticky bar on the left will obscure some of the content on the page.
If there was a stack already doing this it would be good.
Thanks in advance if someone knows how.
Easiest way would be to hide the left bar on mobile and have second set of social icons at the bottom which you hide at desktop and tablet.
Rob
Thanks Rob. I understand that but I’m not sure how to modify the code to make it appear at the bottom and horizontally.
What theme are you using Frank?
Rob
I have tried it with various themes such as Reason Pro and basic ones but the code is designed to place the social media sticky bar to the left, 50% down. The exception I have found is that Kiki Pro does shift the content to the right on mobile devices which allows the sticky bar to not obscure content which is the cases with many others I have tried. Joe Workman’s from Foundation places it in large icons horizontally.
My problem is a lack of knowledge how to program to check if mobile and then to modify the code to place it horizontally.
I guess I may work it out eventually but was hoping to avoid spending endless time experimenting to achieve the end goal.
/* Fixed/sticky icon bar (vertically aligned 50% from the top of the screen) */
.icon-bar {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/* Style the icon bar links */
.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
That’s way above my paygrade but it looks as though you might be able to do it with code from this site - https://www.addthis.com/examples/
Rob
Thanks for your help Rob.
Their service does what I want but it does not display the bar when it is on a mobile device (although their example does on their site).
I may use this in the short term if I can work out why it works in a plain html page (not done in RW) but makes the responsive part on mobile devices disappear.
I will try and work this out because the code I have works for desktops but it was just the responsive movement for mobile devices that I had not worked out.
Thanks again for your assistance.
One reason for trying to work it out is that the service drives the traffic to another 3rd party which I would prefer to avoid.
I have used stacks from Bars Stacks, Cosculture and Joe Workman but none quite do what I want as per the example code I have used.
It might be worth seeing if there’s a way of using @willwood’s Sharestack. It’ll certainly do your footer and you can ‘stick’ it to the side of the screen. I can’t see a way of making the icons stack the way you want them to, but it could be this is possible with some CSS that I don’t know.
Rob
With ShareStack; in the stack settings…
-
Assuming that you have the icons set to 50px wide.
-
Change the Width setting to 50.
-
In the units box immediately below, change this from Percent to Pixels.
This will force the ShareStack to only be 50px wide, and your icons will stack vertically:
Click the pictures to see a bigger view.
The position of ShareStack can be changed to ‘fixed’ if you want it stuck to a corner of the screen.
Multiple ShareStacks can be safely used on the same page. Therefore it would be feasible to configure one for mobile, a second for tablet and the third for desktops.
All the above can be done using the standard settings. Further customisations are possible with custom CSS code.
Fixed positioning typically works well. The only thing I would urge you to be careful about is to ensure the social bar does not accidentally ‘over run’ other elements, like your mobile menu toggle button or footer content. This is a mistake I sometimes see people make.
Let me know if you require any further help with using this stack.
Thank you for the information. I will give your stack a try.
Will,
I have experimented with the ShareStack and tried it with various themes.
I tried having two versions of the stack on the same page where I made the one going horizontal smaller and hidden on all but mobile. I tried positioning it at the top and at the bottom of the page but it will not show on a mobile device.
I created a second page which only has the mobile version and only shows on a mobile device but it still will not appear on the mobile device.
I created another page which is using a different theme (but had tested with the same theme as the other two pages) using html code to produce the social buttons. This works on all devices, including mobile.
I note you said to be careful about ensuring the social bar does not overrun other elements such as the menu or footer. When the social bar did not appear on the mobile device, I experimented with different positions but it still does not appear.
I added one more page using ShareThis. Its a bit annoying with the popup but it does what I am looking for. As I may have mentioned before, using that service is not my preferred option.
I am at a bit of a loss with this now. Any further help would be greatly appreciated.
I posted the test site at: Test ShareStack Site
Thanks
Probably easier to send me a sample project file so I can check your settings. I’m guessing you might have muddled the generic mobile / tablet / desktop display settings (which most stacks have) with the breakpoint settings in the stack.
You were right. I changed the minimum breakpoint to 1 and it worked.
Thank you for offering to look at the project but I won’t waste your time as it now works following your advise.
Thanks again
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.