Adding Title and button in Video Header

I’ve used the custom javascript you put in this post https://wordpress.org/support/topic/adding-title-and-call-to-action-button-in-video-header/ to add a title and button to our video header using Sydney. The title and buttons work fine on desktop browsers however the title moves to the bottom of the header on phones and even lower (with the button off the bottom of the header) on tablets.

How do we keep the title and button centred vertically on mobile?

Cheers

Hello there,

Please share your site URL here, so I can take a look.

Regards,
Kharis

Here’s the link to the site. http://www.varipix.com/content/

Thank you for having a look.

Cheers
Ian

Hello there,

Thank you for sharing. To fix this you’ll need a relative positioning for the video container. It can be done by adding the below CSS code to Appearance > Customize > Additional CSS in your site dashboard.


.sydney-hero-area {
  position: relative;
}

Regards,
Kharis

Kharis you are incredibly helpful. That worked. Thank you so much.

Cheers
Ian

You’re welcome!

If you enjoyed Sydney and our services, could you please take a few minutes to write some review and tell your experience working with our product on WP.org here? We’d highly appreciate it if you do so.

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

Hello I am traying to do the same.
To get the text slider, and CTA on the video

I actually would like to get 3 CTA buttons

I tried another JS you posted for that but it didn’t work

Now I tried the one on the link above but it didn’t work out either

the site http://r4i.62a.myftpupload.com/

Thank you

Hello there,

I just replied you already in this thread: Add three buttons on video header in sydney

Regards,
Kharis

Thank you I posted my result there.
You are awesome! :star_struck:

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

Hello,
I have the same problem. https://advokatni.net/
Would appreciate any help.
Thank you
David

Hello there,

09

The title and subtitle displays properly on your video header. Do you still need an assistance?

Regards,
Kharis

Hello Kharis,
Thank you very much for the assistance. I achieved the vertical centering with the lower mentioned CSS. Do you think it is OK is there a better solution? What does that 6em stands for?

    .sydney-hero-area {
      position: relative;
    }

    .text-slider {
      position: relative;
      top: 6em;
    }

Regards!
David

Plus, I have one more question. I use custom CSS to make the header logo smaller when scrolling down. Actually, I need to have this effect only on the front page. On other pages, I want to have the logo smaller all the time. Is there some custom CSS for this?
The CSS I use are as follows:

    .site-logo {
      max-height: 175px;
    }

    header.float-header img.site-logo {
      max-height: 100px;
    }

    @media only screen and (max-width:767px) {
      .site-header img.site-logo {
        max-height: 75px !important;
      }
    }

Thank’s a lot
David