search

carrot / share-button

:warning: :warning: Currently Unmaintained :warning: :warning: - fast, beautiful, and painless social shares:
http://sharebutton.co/
Other
2.95k stars 381 forks source link

How to nest share button properly in Bootstrap menu? #276

Closed brylie closed 8 years ago

brylie commented 8 years ago

We have a site navigation bar built using Bootstrap 3. When adding the <share-button> element to the Bootstrap menu, the Share text is mis-aligned with other navigation links. Inspecting the page shows that the hidden social icons are pushing the Share text out of alignment:

screenshot-1

What CSS rules should I apply, so that the share button aligns with other Bootstrap navigation menu links (pictured)?

brylie commented 8 years ago

I found one solution for this question, was to create a parent container and set padding-top:

#share-button-container {
  padding-top: 1.7em;
}

However, I am not sure if there is a better solution, so would appreciate feedback.

hhsnopek commented 8 years ago

Hey @brylie the share-button was really meant, by default, to be used with spacing around/below a block of text. Your solution is perfect :smile: