Remove call to action button in headslider on mobile devices

Hi, another question. Is it possible to remove the call to action button in the headslider on mobile devices? On the desktop I would like to have the button. Thanks in advance.

Hello there,

Yes, it’s possible to do. What you should do is to add the below simple CSS code to Appearance > Customize > Additional CSS from dashboard.


@media only screen and (max-width:1024px) {
  
  .button-slider {
    display: none;
  }
  
}

Regards,
Kharis

Great thanks. Is it also possible to give the button in the headslider on mobile devices an other call to action than the desktop? I would prefer a button named “services” with a link to my services page on mobile devices. But on the desktop I would still like to use the “read more” button.

Hello there,

That’s possible. The first thing to do is to create another extra slide button with jQuery code. This can be accomplished by doing these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

jQuery(function($) {

  if( $('.header-slider').length ) {

    var link     = '#link';
    var label    = 'Button Label';
    var slideBtn = '<a style="display:none;" class="roll-button button-slider mobile-button-slider" href="'+link+'">'+label+'</a>';

    $('.header-slider .slide-inner').append(slideBtn);

  }

});

Set the button link and label in the respective variables. This button is hidden by default with inline CSS code: style="display:none;".

  1. Update

To make this extra button visible on mobile screen, add this CSS code to Additional CSS.


@media only screen and (max-width:1024px) {
  
  .mobile-button-slider {
    display: inline-block !important;
  }
  
}

The last thing to do is to check whether site cache applied or no. If applied, you’re required to flush it. Otherwise, the code additions won’t take any effect.

Please let’s know in a new topic if you need anything else. Note that you should avoid posting multiple questions at once in a single topic as it’ll be hard to track progress.

Regards,
Kharis

It works :). Thanks a lot!

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

Hi Kharis, In the meantime I have added an second language (Danish) to my website. But now goes the CTA button on mobile on the Danish version also to the English version of the “services page”. What can I do, so that this CTA button on the Danish version goes to the Danish version of the “service page”? Thanks in advance
Greetings,
Sofie

Hello there,

I’ve answered this already on this older topic. Hopefully that could work for you as well.

Regards,
Kharis

Hi Kharis, I tried to change my JS code with the code from the older topic, but it doesn’t succeed. In my case it’s only on mobile where I want to change it. This my code at the moment:

jQuery(function($) {

if( $(’.header-slider’).length ) {

var link     = 'https://sooffinds.com/seo-services/';
var label    = 'services';
var slideBtn = '<a style="display:none;" class="roll-button button-slider mobile-button-slider" href="'+link+'">'+label+'</a>';


$('.header-slider .slide-inner').append(slideBtn);

What do I need to add to change the link of the button in the Danish mobile version of my website?

Thanks!!

}

});

Hello there,

Share a link to your site please. Let me check the exact selector we can use, so I can suggest you with the correct code.

Regards,
Kharis

Hi Kharis, It’s https://www.sooffinds.com. It’s going about the mobile version, the button on the headerslider. Thanks!

Hello there,

Thank you for sharing. Please try this code:

    jQuery(function($) {

      if( $('.header-slider').length ) {

        var lang    = $('html').attr('lang');
        
        var link     = 'https://sooffinds.com/seo-services/';
        var label    = 'services';

        if( lang == 'da-DK' ) { // Button link and label for Danish
          link = 'https://www.sooffinds.com/lokale-seo-services/';
          label = 'lokale seo services';      
        }  
        
        var slideBtn = '<a style="display:none;" class="roll-button button-slider mobile-button-slider" href="'+link+'">'+label+'</a>';
       

        $('.header-slider .slide-inner').append(slideBtn);
        
        
      }

    }); 

Regards,
Kharis

Thank you so much! It works perfect :slight_smile:

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