Remove/Hide Back to Top Button on Mobile – DIVI Theme

Girish Dadlani — Sat, 05 Oct 2019 06:18:16 +0000

If you are using the DIVI Theme, you have an option of adding the Back TO Top Button on your website. It is highly recommended for pages that have a lot of content. Not sure, Change Color of Back to Top Button in DIVI for it ? you can read it here. In this tutorial we will learn how to remove or hide the Back To Top Button on mobile devices, with a few lines of CSS.

Once you add the back to top button it will show up on your desktop and mobile devices as shown below.

Desktop:

Mobile:

CSS to Remove or Hide the Back To Top Button on Mobile.

To add the CSS, head over to your style.css in your child theme and paste the following CSS.
Alternatively you can also go to DIVI -> Theme Options and paste the CSS in the Custom CSS box.

/* CSS to hide the Back To Top Button on mobile*/
@media only screen and ( max-width: 786px ) {
.et_pb_scroll_top{
display:none !important;
}
}

This will remove the Back To Top Button from your Mobile View as shown below. The CSS will hide the Back To Top button when you are on a device which has a screen size smaller than the media query value.(786px)

Remove Back to Top Button on Mobile

Liked this tip? Do leave me a comment and make sure you read my other TIP’s on my DIVI BLOG.

Change Color of Back to Top Button in DIVI

Girish Dadlani — Fri, 04 Oct 2019 06:20:08 +0000

Styling the Back to Top button can be done with a few lines of CSS. Let’s change the color for the Back to Top button in DIVI. The theme allows you to enable a back to top button, in the DIVI –> Theme Options

Why Use a Back To Top Button

This is a little button that allows the user to scroll back, right to the top of the page on click of a button. This is particularly useful on single page websites, or if you have a long page with a lot of content . Once the user scrolls down, the Back To Top button becomes visible and helps the usability of your website. I recommend it for long pages.

How to Enable Back To Top Button

By default the Back To Top is not enabled when you install DIVI. Hence, you have to turn it on using the theme options. Head over to your DIVI –> Theme Options and enable the Back To Top Button as shown below.

Enable the Back to Top Button in DIVI Theme Options

Here is what the Back to Top Button Looks like in DIVI.

CSS to Change the Color of Back To Top Button

To add the CSS, head over to your style.css in your child theme and paste the following CSS.
Alternatively you can also go to DIVI -> Theme Options and paste the CSS in the Custom CSS box.

/* CSS to style the Back To Top Button */
.et_pb_scroll_top.et-pb-icon.et-visible, .et_pb_scroll_top.et-hidden {
/* Change background color */
background: #000000;
/* Change arrow color */
color: #e2820b;
/* Change border width, style and color */
border: 2px solid #e2820b;
}

I have used a black color for the background and an orange color for the arrow. Change it to suit your website colors.

Here is what it looks like after applying the CSS.

Color Changed of Back To Top Button

If you found this DIVI TIP helpful,do leave me a comment. For more such tips on WordPress and DIVI, check out my DIVI Blog.

DIVI Back To Top Button Archives - WPPortfolio – Expert Divi Freelancer & WordPress Web Design