Reorient Portfolio Social Share to Vertical

[lpanalyst]

This is a major element for our site given the number of solution pages we have so would appreciate any help to make this happen!

I would like to reorient the Social Share to verticle and set it flush up against the right side post detail image/header image and center it vertically on the image.

Attaching image showing placement of the first linkedin, but would want all of the buttons.

If you can make this happen you guys are my heros…

[lpanalyst]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please always provide any specific page URL .

Thanks 🙂
With Best Regards
Swift Ideas

[lpanalyst]

Yes, sorry!

http://lpanalyst.com/sitev2/?portfolio=secondary-valuation

[Kyle – SUPPORT]

Hi

Add this to your custom css:

.share-links {
  position: fixed;
  right: 0;
}
.portfolio-options-bar .share-links ul li {
  border-left: 0 none;
  margin-bottom: 3px;
}
.share-links ul.bar-styling > li > a {
  border-top-left-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 4px;
}

– Kyle

[lpanalyst]

Hi Kyle,

That code brought the horizontal social share flush against the side of the page. Is it possible to re-orient vertically so the bar runs down the right side of my page?

This is a huge element — any help you can give me is greatly appreciated!!

http://lpanalyst.com/sitev2/?portfolio=secondary-valuation

[Kyle – SUPPORT]

Not sure what you mean? Your screenshot shows the icons flush to the edge?

– Kyle

[Kyle – SUPPORT]

Ahh sorry, I am in firefox, I see that it has not worked for chrome. Let me check

In the meantime, check in firefox and let me know if this is correct

– Kyle

[Kyle – SUPPORT]

Add this:

.portfolio-options-bar .share-links ul li {
float: none;
}

– Kyle

[lpanalyst]

hey kyle,

sorry, wasn’t clear. Here is a crude image of the alignment i am hoping to achieve. with the 5 social share (not all linked in) stacked vertically on the right side of the page.

[Kyle – SUPPORT]

If you add the code above that’s how it will look

– Kyle

[lpanalyst]

Kyle — this looks amazing!!! thank you!!

Can you help me move this up a bit so we are centered on the yellow image?
http://lpanalyst.com/sitev2/?portfolio=restructuring-valuation

Thanks so much! I’m really stoked about the way this looks!

[Kyle – SUPPORT]

Hi

Add this:

.portfolio-options-bar .share-links ul.bar-styling {
  padding-top: 40px;
}

– Kyle

[lpanalyst]

looks like that moved them the wrong direction!

should it be padding-bottom?

http://lpanalyst.com/sitev2/?portfolio=diligence-pack-2

[lpanalyst]

or just reduce padding-top?