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.
Categories: Tutorials
Divi Responsive Helper Plugin 2.0 by Pee Aye Creative

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 Plugin 2.0 by Pee Aye Creative
3
Last updated Jul 1, 2021 @ 2:01 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

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. Required fields are marked *

Recent Posts

Pin It on Pinterest

0

Your Cart