Slider not clickable

My slider is not working properly, title on both desktop and mobile sites slider are not clickable. When the cursor moves onto the title, the title color change into purple, but when I click on the title, nothing happens, for both mobile version and desktop version.

Can you please help?

My website is http://www.dailysurprises.co.uk/

Thanks

Hi @dailysurprises,

I hope you are well today and thank you for your question.

I visited your shared site and it seems this is happening on your site because of the lazyload functionality that you are using on your site using the wp-rocket plugin.

Could you please disable this functionality to check whether it works fine?

Kind Regards,
Movin

Hi Movin

Thanks for getting back to me this quick. I already disabled the lazyload function in wp-rocket plugin. However the slider is still not clickable, for both mobile version and desktop version. Can you please help?

Many thanks

Yuan

It is working fine on our demo site here https://colorlib.com/activello/ and also on my test site.

Which version of theme are you using?

Have you made any changes in the theme files or using child theme?

Please try disabling minification on your site and then clear the cache,

I am using Activello 1.1.1 as parent theme and child theme has below changes in Theme Footer and Theme Functions

Theme Footer

<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the #content div and all content after
 *
 * @package activello
 */
?>
				</div><!-- close .*-inner (main-content or sidebar, depending if sidebar is used) -->
			</div><!-- close .row -->
		</div><!-- close .container -->
	</div><!-- close .site-content -->

	<div id="footer-area">
		<footer id="colophon" class="site-footer" role="contentinfo">
			<div class="site-info container">
				<div class="row">
					<?php if( !get_theme_mod('footer_social') ) activello_social_icons(); ?>
					<div class="copyright col-md-12">
						<?php echo esc_html( get_theme_mod( 'activello_footer_copyright', 'Activello' ) ); ?>
						  <a>" target="_blank">DailySurprises </a>
                                            <br/>
                                            <a>/privacy-policy" target="_blank">Privacy Policy </a>
						&nbsp &nbsp &nbsp
                                            <a>/terms-conditions" target="_blank">Terms and Conditions</a>
					</div>
				</div>
			</div><!-- .site-info -->
			<div class="scroll-to-top"><i class="fa fa-angle-up"></i></div><!-- .scroll-to-top -->
		</footer><!-- #colophon -->
	</div>
</div><!-- #page -->

<?php wp_footer(); ?>

</body>
</html>

<strong>Theme Functions</strong>

<?php

// Queue parent style followed by child/customized style
add_action( 'wp_enqueue_scripts', 'func_enqueue_child_styles', 99);

function func_enqueue_child_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_dequeue_style('activello-style');
    wp_enqueue_style( 'activello-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

/**
 * Featured image slider, displayed on front page for static page and blog
 */
function activello_featured_slider() {
  if ( ( is_home() || is_front_page() ) && get_theme_mod( 'activello_featured_hide' ) == 1 ) {
		
		wp_enqueue_style( 'flexslider-css' );
		wp_enqueue_script( 'flexslider-js' );
		
    echo '<div class="flexslider">';
      echo '<ul class="slides">';

        $count = 4;
        $slidecat = get_theme_mod( 'activello_featured_cat' );

        $query = new WP_Query( array( 'cat' => $slidecat,'posts_per_page' => $count ) );
        if ($query->have_posts()) :
          while ($query->have_posts()) : $query->the_post();

          echo '<li><a href="' . get_permalink() . '">';
            if ( (function_exists( 'has_post_thumbnail' )) && ( has_post_thumbnail() ) ) :
              echo get_the_post_thumbnail( get_the_ID(), 'activello-slider' );
                    echo '<div class="flex-caption">';
                      echo get_the_category_list();
                        if ( get_the_title() != '' ) echo '<h2 class="entry-title">'. get_the_title().'</h2>';
                        echo '<div class="read-more">' . __( 'Read More', 'activello' ) .'</div>';
                    echo '</div>';
            endif;
               endwhile; wp_reset_query();
            endif;

          echo '</a></li>';
      echo '</ul>';
    echo ' </div>';
  }
}

This can be child theme issue on your site so to confirm it just temporary use the Activello theme instead of child theme on your site. If everything works fine then it’s your child theme issue so just share me your child theme so that i can troubleshoot it.

Hi Movin, when I go back to activello parent theme, desktop version slider works perfectly, however, mobile version slider do not have title and pictures are not clickable. My website is currently under parent theme, you can have a look.

I have attached child-theme.rar but I think the problem is within the parent theme

Upload Errors:
child-theme.rar: Sorry, this file type is not permitted for security reasons.

I am gonna try to upload again, just not .rar

Many thanks for your help

Hi Movin, when I go back to activello parent theme, desktop version slider works perfectly, however, mobile version slider do not have title and pictures are not clickable. My website is currently under parent theme, you can have a look.

I have attached child-theme.rar but I think the problem is within the parent theme

This is not the issue of parent theme but this is how the parent theme works which you can see on our demo site here Activello Theme Demo - Just another colorlib.com site

To change this functionality you have to use child theme.

Please share me your child theme in .zip format so that i can troubleshoot it.

It is the parent theme problem, I just went to the link you give to me on mobile. You can see the slider on mobile is not clickable and doesnt not show the tile. Screen shot included.

Oh and child theme is attached. But as I shown in the screenshot in the previous reply, parent theme slider is not working on mobile.

Thanks

I think you don’t understand what i am telling you that the slider images are not clickable and only the text on it is clickable but on mobile devices as the screen size is small so we hide the slider text so that it won’t occupy all the slider space.

If you want to display the slider text on mobile devices then you can do so by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS

#page .flex-caption {
    display: block;
}  

Ok, in that case, can you please

  1. Help me to trouble shoot my child theme (attached in my previous comment), because desktop version slider title is currently not clickable

  2. Is there anything else I need to add to custom css to make mobile slider title clickable? Because slider in the mobile version has title but it is not clickable.

Many thanks

I have modified your shared child theme and attached it to this reply so please try using it.

Hi Movin

It works beautifully!!! Thank you very much! You are lifesaver :slight_smile: Have a great day

You are most welcome here :slight_smile: