[dgtldre@gmail.comParticipant]

Im working with the following code for a floating button which is almost there. I need this to go to a URL, and i want it to hide it under smaller mobile screens b/c it covers my content in top the bar. Can you please assist. I did a lot of searching in forum and this is the closest I was able to get

jQuery(document).ready(function($) {
 $('<a ref="URL GOES HERE" class="floating-button x-btn x-btn-flat">Button Text</a>').appendTo('.site');
});

.site .floating-button {
}
.floating-button {
position: fixed;
top: 2%;
right: 20px;
z-index: 2000;

[Nabeel AModerator]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[dgtldre@gmail.comParticipant]

here’s the URL
http://wordpress-17173-37579-139454.cloudwaysapps.com/

[Nabeel AModerator]

Hi again,

To hide the button in smaller screens just add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media screen and (max-width: 979px){
.floating-button {
    display: none;
}
}

Let us know how this goes!

[dgtldre@gmail.comParticipant]

Hi, thanks for the reply. I added the code above but it’s still showing in mobile. It’s not hiding. Please advise.

[Rue NelModerator]

Hello There,

Thanks for the updates! Please update your JS code and use this instead:

jQuery(document).ready(function($) {
 var W = $(window).width();
 if ( W > 979 ){
   $('<a ref="/plan-your-event" class="floating-button x-btn x-btn-flat">PLAN YOUR EVENT</a>').appendTo('.site');
 }
});

We would loved to know if this has work for you. Thank you.

[Author]

Posts