Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Make The Divi Back To Top Button Visibility Responsive Per Device

Nelson Miller Profile Orange
In this tutorial I will show you how to enable or disable the back to top button visibility per device in Divi.

▶️ Please watch the video above to get all the exciting details! 👆

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 Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about 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 by Pee Aye Creative

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Trail Committee Membership badge with map design

Join The Trail Committee!

Show support for our ongoing work creating community resources at Pee-Aye Creative and enjoy exclusive member perks in return.

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

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

0

Your Cart