Edit Back to Top Button CSS code for mobile view only

Hello,

I’ve successfully added code to my site to create a back to the top button. The button is on all screen sizes though and I’d like it to be for mobile view only. How do I edit the code? I reached out to Wordpress.com but they said I need to speak to theme developers for help.

body {
font-family: Work Sans, sans-serif;
font-size: 16px;
}

#myBtn {
display: none;
position: fixed;
bottom: 100px;
right: 30px;
z-index: 99;
font-size: 14px;
border: none;
outline: none;
background-color: #FCC213;
color: #020101;
cursor: pointer;
padding: 10px;
border-radius: 4px;
}

#myBtn:hover {
background-color: #F7F7F7;
}

//Get the button
var mybutton = document.getElementById(‘myBtn’);

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = ‘block’;
} else {
mybutton.style.display = ‘none’;
}
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}

Hi,

Thank you for contacting us. I am happy to help with your queries.

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    #myBtn {
      opacity: 0;
    }

    @media only screen and (max-width: 991px) {

      #myBtn {
        opacity: 1;
      }
      
    }

Regards,
Kharis
aThemes Support

1 Like

Works perfect, thanks!

1 Like

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support