Header slider text link

Hello,

I have on header slider Title and subtitle text as follows:

;(function($) {

   'use strict'
   
   if ( $( ".sydney-hero-area #slideshow" ).length ) {
     $('.sydney-hero-area #slideshow').superslides({
       play: $('.sydney-hero-area #slideshow').data('speed'),
       animation: 'fade',
       pagination: true,
     });
   }


})(jQuery);

;(function($) {

‘use strict’

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

var maintitleText1 = 'Nová kalkulačka výživného';
var maintitleText2 = 'Nová kalkulačka výživného';
var maintitleText3 = 'Nová kalkulačka výživného';
var maintitleText4 = 'Nová kalkulačka výživného';
var maintitleText5 = 'Nová kalkulačka výživného';


var subtitleText1 = 'Vychází ze současné legislativní úpravy,</br> nejnovější judikatury i aktuálních návrhů </br> na změny stávající úpravy doporučující tabulky pro stanovení výše výživného.';
var subtitleText2 = 'Zohledňuje právo na srovnatelnou životní úroveň dítěte a rodičů,</br> náklady na dopravu, podíl na péči rodičů, </br>ale i další vyživovací povinnosti obou rodičů.';
var subtitleText3 = 'Tato kalkulačka výživného rozpočítává výživné tak, </br> aby rodičům zbývalo prostředků na jejich díl péče.';
var subtitleText4 = 'Tím se v nejlepším zájmu dítěte </br>aktivně podporuje péče či styk obou rodičů.';
var subtitleText5 = 'Ten, kdo se nestará, tak platí na výživném více než ten, </br> kdo se pravidelně stará a v době péče či styku vše potřebné za dítě či děti hradí.';

  
$('.slide-item:nth-of-type(1) .slide-inner .maintitle' ).html(maintitleText1);
$('.slide-item:nth-of-type(2) .slide-inner .maintitle' ).html(maintitleText2);
$('.slide-item:nth-of-type(3) .slide-inner .maintitle' ).html(maintitleText3);
$('.slide-item:nth-of-type(4) .slide-inner .maintitle' ).html(maintitleText4);
$('.slide-item:nth-of-type(5) .slide-inner .maintitle' ).html(maintitleText5);
        
$('.slide-item:nth-of-type(1) .slide-inner .subtitle' ).html(subtitleText1);
$('.slide-item:nth-of-type(2) .slide-inner .subtitle' ).html(subtitleText2);
$('.slide-item:nth-of-type(3) .slide-inner .subtitle' ).html(subtitleText3);
$('.slide-item:nth-of-type(4) .slide-inner .subtitle' ).html(subtitleText4);
$('.slide-item:nth-of-type(5) .slide-inner .subtitle' ).html(subtitleText5);

}
})(jQuery);

but on mobile I have remove button in css on mobiles as follows

@media only screen and (max-width: 800px) {
.button-slider {
display: none;
}
body.custom-background {
background-size: cover;
}
.site-header {
border: none !important;
}

  .site-header,
  .site-header.fixed, 
  .site-header.float-header {
    position: static;
  }

But in this case I want to have the title and subtitle clickable as link.

Is this possible?

Thanks
Jaromir

Hello Jaromir,

You can wrap the slide title variable with a link tag. For example:

$('.slide-item:nth-of-type(1) .slide-inner .maintitle' ).html('<a href="https://yoursite.com/page-link">' + maintitleText1 + '</a>');

Replace https://yoursite.com/page-link with a valid link of you desired.

When it’s applied to the subtitle, it’ll look like this:

$('.slide-item:nth-of-type(1) .slide-inner .subtitle' ).html('<a href="https://yoursite.com/page-link">' + subtitleText1 + '</a>');

Do not remove the + that unites string and variable.

Regards,
Kharis

Hello Kharis,

works perfectly. Thanks a lot.
One more question:
As I change the main title to the link, color of header changed based on the default link color in template.
Where and how I can change the color by css only this this main title

Thanks
Jaromir

Great! Happy to hear that worked for you. To use non-link color, you can add this CSS code to Appearance > Customize > Additional CSS from dashboard.

.slide-inner .maintitle a,
.slide-inner .subtitle a,
.slide-inner .maintitle a:hover,
.slide-inner .subtitle a:hover{
  color: inherit;
}

Regards,
Kharis

You are brilliant

All works perfectly

Thanks
Best Regards
Jaromir

You are brilliant.

Thanks a lot. All works perfectly

Best Regards

Jaromir

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