CTA widget & CTA button on header slider

Hi there,

I have added the call to action widget onto my home page (Sydney FP: Call to action). On adding the text to the widget it appears on the far left of my screen with no indentation whatsoever, not as it appears on demo content where it is on the left but significantly indented. I cannot find anywhere how to change this - can you advise?

Additionally I would like to have my CTA button on the header slider styled as the button on the CTA widget - ie transparent until you hover over it, then highlighted in chosen theme colour once you hovering over it - is it possible to change that?

TIA!

Hello there,

Edit row > Row Styles > Layout > Row Layout > select Full Width.

To style the slide button to look like the CTA button, add the following CSS code into Appearance > Customize > Additional CSS:


.roll-button.button-slider {
  background-color: transparent;
  color: #d65050;
}

.roll-button.button-slider:hover {
  background-color: #d65050;
  color: #fff;
}

Regards,
Kharis

Thanks you so much for this!

One last related question re the header slider. I am customizing through page builder etc and don’t want the text slider on the header slider to scroll in from the left, I just want it static. I have checked the box under: Appearance> Customize> Header Area> Header Slider> Stop the text slider, but this doesn’t consistently stop it. Sometimes my hhome page loads with the text static, sometimes it still scrolls in from the left.

Is there a way to fix this?

Many thanks :slight_smile:

Whoops, it’s sometimes scrolling in from the right not left lol

Hello there,

Try adding the following CSS code and let me know how it helps.


html,
body {
  overflow-x: hidden;
}

Regards,
Kharis

That has done it - thank you so much Kharis!

Kind regards, Janine

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

OK so the slider text has stopped scrolling but unfortunately the CSS code to make the CTA button in the header slider transparent and then colored when hovered over doesn’t.

I have added into the area you suggested and put it after the code for stopping the text sliding. I have added it within the /* / for the slider text CSS and have also given it it’s own / */ and neither way works. . .

Am I adding the CSS right?

KR, Janine

Hi Janine,

I’d suggest you to validate your custom CSS code using this tool. Please share your site URL here, so I can check.

Regards,
Kharis

Hey Kharis

The W3C validation tool says no errors, so here is the url - soulseekeryoga.com.

Cheers, J :slight_smile:

Please remove all of /* */ wrappers, so it will look like this:


html,
body {
  overflow-x: hidden;
}

.roll-button.button-slider {
  background-color: transparent;
  color: #d65050;
}

.roll-button.button-slider:hover {
  background-color: #d65050;
  color: #fff;
}

Regards,
Kharis

Hi Kharis

Thank you so much for all your help on this, all looks perfect now :slight_smile:

KR, Janine