How To Enable Or Disable The Back To Top Button Visibility Per Device In Divi Tutorial by Pee Aye Creative

How To Enable Or Disable The Back To Top Button Visibility Per Device In Divi

In this tutorial I will show you how to enable or disable the back to top button visibility per device in Divi.
Divi Responsive Helper by Pee Aye Creative 2.2

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Procedure

Enable The Back To Top Button

The first step before we can control the visibility of the Back To Top Button in Divi is to actually turn the setting on (by default when you install Divi, this setting is not enabled). To do this, go to Divi>Theme Options to the General tab and then look for the Back To Top Button.

enable the back to top button in Divi

Possible Variations

There are six different possible responsive scenarios for showing and hiding the Back To Top Button:

  • Show on Desktop only
  • Show on Tablet only
  • Show on Phone only
  • Show on Desktop and Tablet
  • Show on Tablet and Phone
  • Show on Desktop and Phone

Since I have each of these six options in the Divi Responsive Helper settings, I will also show you how to do each one of these scenarios with custom CSS code.

Where To Place The CSS Snippet

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

Show On Desktop Only

This CSS code snippet will show the back to top button on Desktop devices only, and will hide the button on Tablet and Phone devices.

/*show the back to top button on desktop only*/

@media all and (max-width: 980px) {
	.et_pb_scroll_top.et-pb-icon {
		display: none !important;
	}
}

Show On Tablet Only

This CSS code snippet will show the back to top button on Tablet devices only, and will hide the button on Desktop and Phone devices.

/*hide the back to top button on desktop*/

@media all and (min-width: 980px) {
	.et_pb_scroll_top.et-pb-icon {
		display: none !important;
	}
}


/*hide the back to top button on phone*/

@media all and (max-width: 768px) {
	.et_pb_scroll_top.et-pb-icon {
		display: none !important;
	}
}

Show On Phone Only

This CSS code snippet will show the back to top button on Phone devices only, and will hide the button on Desktop and Tablet devices.

/*show the back to top button on phone only*/

@media all and (min-width: 768px) {
	.et_pb_scroll_top.et-pb-icon {
		display: none !important;
	}
}

Show On Desktop And Tablet

This CSS code snippet will show the back to top button on Desktop and Tablet devices only, and will hide the button on Phone devices.

/*show the back to top button on desktop and tablet only*/

@media all and (max-width: 768px) {
	.et_pb_scroll_top.et-pb-icon {
		display: none !important;
	}
}

Show On Tablet And Phone

This CSS code snippet will show the back to top button on Tablet and Phone devices only, and will hide the button on Desktop devices.

/*show the back to top button on tablet and phone only*/

@media all and (min-width: 980px) {
	.et_pb_scroll_top.et-pb-icon {
		display: none !important;
	}
}

Show On Desktop And Phone

This CSS code snippet will show the back to top button on Desktop and Phone devices only, and will hide the button on Tablet devices.

/*hide the back to top button on desktop*/

@media all and (min-width: 980px) {
	.et_pb_scroll_top.et-pb-icon {
		display: none !important;
	}
}


/*hide the back to top button on phone*/

@media all and (max-width: 768px) {
	.et_pb_scroll_top.et-pb-icon {
		display: none !important;
	}
}

Do It With A Setting!

Make life easier and use the Divi Responsive Helper instead, the ultimate Divi responsive toolkit with awesome features and settings to help make your website look and work great on all devices!

Divi Responsive Helper by Pee Aye Creative 2.2
3

Last updated Oct 25, 2021 @ 1:49 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

0 Comments

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart