Shoreditch Theme Back To Top Button

rrsdd · Member · Jul 30, 2016 at 5:16 pm
Copy link

Add topic to favorites
I’m using the Shoreditch theme and would like to know if there’s a way to add a Back To Top button/chevron on the lower right of a longer panel page? Thanks.

The blog I need help with is: (visible only to logged in users)
hallluke · Member · Jul 30, 2016 at 8:25 pm
Copy link
The best way I can think of achieving this is if you add a custom link to your main menu and then reposition it to the bottom of the screen on every page.

First you’ll need to set up the link. Go to the menu section of the customiser, select your primary menu and add a custom link. In the URL field type in #main. Then in the Navigation Label field type in whatever character you want to use. Here’s some examples you could copy in: ^ ↑ ⇡ ⇧. Finally, in the CSS Classes field type in backtotop, you might need to add the link to the menu then click on it in the menu list to see this extra field.

Now that’s set up you can go to the CSS section of the customiser and add this code:
```
#site-navigation li.backtotop {
  display: none;
}
@media screen and (min-width: 896px) {
  #site-navigation li.backtotop {
    display: block;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    border: 1px solid #f3f3f3;
    padding: 0 10px 5px;
    line-height: 1;
    box-shadow: 2px 2px 5px #999;
    font-size: 24px;
  }
}
```
It will show the arrow at the bottom right of the screen styled so it fits in with the theme. It’s also set to disappear when the menu collapses to the tablet/mobile view as screen space is at a premium and it’s much easier to scroll on a device with gesture controls.

I hope it helps. If you have any questions then let me know.
rrsdd · Member · Jul 30, 2016 at 8:28 pm
Copy link
Thanks so much. I will give it a try!
hallluke · Member · Jul 30, 2016 at 8:36 pm
Copy link
It might look a bit weird once you set it as it’s in a similar location to the little customise/edit box that pops up for logged in users when you view your site but no-one else will see that so it should look OK for everyone else.
rrsdd · Member · Jul 31, 2016 at 2:27 am
Copy link
It worked great for the general setup, although there’s one thing I’d like to change, if possible. Is there a way to make the backtotop chevron only show at the bottom of the page, instead of all along the page starting from the top. That doesn’t look right to me.

Also, I can’t get the size of the chevron symbol I used any bigger. I changed the font size, but that didn’t do it. It might be because I copied and pasted a symbol from Word. I’ll play around with this.

Again, thank you for your help.
hallluke · Member · Jul 31, 2016 at 8:41 am
Copy link
I can’t think of a way to pin it to the bottom in CSS with your theme because the menu is fixed to the top.

The text size is easier, plus using the carat symbol you will want to change the padding and set a background. I’ve just posted the differences here instead of the whole block of code again so you can just add or replace these lines:
```
@media screen and (min-width: 896px) {
	#site-navigation li.backtotop {
		background: #fff;
		padding: 15px 5px 0;
	}
	#site-navigation li.backtotop a {
		font-size: 30px;
		padding: 0;
	}
}
```
rrsdd · Member · Jul 31, 2016 at 12:18 pm
Copy link
Yes. Thanks, halluke. This looks better. I appreciate all your help.

No items found.