Sharing Buttons

futbolpulse · Member · Dec 23, 2013 at 12:56 am
Copy link

Add topic to favorites
Hi guys, I was wondering if there is any way to place the sharing buttons on top of each post rather than at the bottom. I am currently using the Twenty Fourteen theme. Thanks!

The blog I need help with is: (visible only to logged in users)
raincoaster · Member · Dec 23, 2013 at 1:13 am
Copy link
Do you have the Custom Design upgrade?
futbolpulse · Member · Dec 23, 2013 at 1:51 am
Copy link
Yes, I have the upgrade.
raincoaster · Member · Dec 23, 2013 at 2:21 am
Copy link
Then I will flag this to be moved to the CSS forum.
arick8 · Member · Dec 23, 2013 at 4:09 am
Copy link
same mission with me,, hope already found solution,, ;)
thesacredpath · Member · Dec 28, 2013 at 5:30 am
Copy link
Hi @futbolpulse, with the Twenty Fourteen theme you are using, which is a responsive width theme, this is difficult to do cleanly since the elements of the page shift as the browser window is narrowed, and to move the sharing icons to the top requires the use of “position: absolute;” which means they no longer flow in relationship to the rest of the elements in the web page. The following positions the sharing buttons above the titles on the posts, but as you will see when you narrow down your browser window, they will overlap the post titles. Since post titles can vary in length and the number of lines, it is very difficult to put the sharing buttons under the post titles.
```
.hentry {
    position: relative;
}
div.sharedaddy {
    position: absolute;
    top: 160px;
    width: 85%;
    z-index: 1;
}
.site-content .entry-meta {
    margin-top: 60px;
}
```
The is a better solution. What it does is to put the sharing buttons above the titles at browser/device/screen widths greater than 1180px, which is where they start to overlap the post metadata and content.
```
@media screen and (min-width: 1180px) {
.hentry {
    position: relative;
}
div.sharedaddy {
    position: absolute;
    top: 160px;
    width: 85%;
    z-index: 1;
}
.site-content .entry-meta {
    margin-top: 70px;
}
}
```
@akatsuki06, you are using a different theme than @futbolpulse, so could I ask you to please start a new thread in the CSS forum so that people coming to this thread later are not confused by two themes being discussed in a single thread? Many thanks in advance.

No items found.