Mobile Header Issues

Hello, before I start, if this issue has previously been resolved then just link the thread below so I can read it, thank you.

The website is: Breakthroughtovictory.com

Now; I put in a header video, noticed you couldn’t put any text and such, so I read a thread that someone advised to plugin into TC customer Javascript the code below to add CTA and text:

(function($){

"use strict"

if( $(‘body’).hasClass(‘home’) ) {

var mainTitle    = 'Breakthrough To Victory';
var subTitle     = 'Where Your Success and Happiness Matters';
var buttonURL    = 'http://breakthroughtovictory.com/results-coaching/';
var buttonLabel  = 'Learn More';

var heroContent  = '<div class="slide-inner">';
    heroContent += '<div class="contain text-slider">';
    heroContent += '<h2 class="maintitle">'+mainTitle+'</h2>';
    heroContent += '<p class="subtitle">'+subTitle+'</p>';
    heroContent += '</div>';
    heroContent += '<a href="'+buttonURL+'" target="_top">'+buttonLabel+'</a>';
    heroContent += '&lt;/div&gt;';

$('.sydney-hero-area').append(heroContent);

}

})(jQuery);

It works great; on Desktop… What I need to fix is on the mobile version, I need it to:

  1. Autoplay and loop
  2. There are two play buttons that are slapped behing the CTA and text, how do I remove them?

Thank you

Hello there,

> 1

I am sorry, there is no way to accomplish it due to mobile browser compatibility. There is nothing to do with the theme.

> 2

Try adding this CSS code into Appearance > Customize > Additional CSS in your site dashboard.


#wp-custom-header-video-button {
  display: none; 
}

If it doesn’t change anything, please enable your video header along with custom jQuery script, so I can have a direct look.

Regards,
Kharis

Thank you, it worked.

I actually have another question now, I recognize you also wrote the code on another post that I used to put text and CTA on the header video. If you notice, the title is really really close to the menu, how do I add padding to the top so it doesn’t look so smushed?

Thank you

Hello there,

Try adding this CSS code into Appearance > Customize > Additional CSS in your site dashboard.


.slide-inner {
   padding-top: 60px;
}

Let me know how it goes.

Regards,
Kharis