Help with multiple cta buttons

Hi, I’m currrently using Sydney Pro A LOT but have hit a site for which I can’t seem to achieve my goal.

I want a home page header section with 4 CTA Buttons visible on desktop, tablet and mobile, each linking to a different page and remaining responsive and clearly visible on any resolution or screen size.

I see Quill comes out the box with 2 cta buttons, can you add more and retain usable functionality?

Or, can I do it with any other theme?

I’ve found on the forum a way to add additional buttons in the Sydney header but they don’t display correctly at lower resolution. 1920x1080 is perfect - see dev site at
Great on desktop or laptop but the buttons disappear on lower resolution.

Hello, please check this topic:

But please use this JS code instead:

        jQuery('a.roll-button.button-slider').after(jQuery('<a href="2ndButtonLink" class="roll-button button-slider 2nd-btn">2ndButtonName</a>'));
        jQuery('a.roll-button.button-slider.2nd-btn').after(jQuery('<a href="3rdButtonLink" class="roll-button button-slider 3rd-btn">3rdButtonName</a>'));
        jQuery('a.roll-button.button-slider.3rd-btn').after(jQuery('<a href="4thButtonLink" class="roll-button button-slider 4th-btn">4thButtonName</a>'));

…and this CSS code instead:

.roll-button {
    margin: 10px;

@media (max-width: 480px) {
    .roll-button.button-slider {
        padding: 5px;
        margin: 5px;

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman,

Thanks for your quick response.
I’ve tried that but now the buttons are not displaying on mobile. I haven’t checked desk/laptop yet.


  1. It looks like you added this CSS code that breaks the mobile view:
#slideshow > div.slide-inner.text-slider-stopped {
    margin-top: 12em;
  1. Please use JavaScript code that I mentioned in my answer above.

  2. Please add the CSS code as well, it looks like you haven’t added it.

Kind Regards, Roman.

A big leap forward thank you. I how have the buttons showing over the text of the logo image.

The font is not a web font so I can’t add it to the slider text fields.

Ideally, I need to position the buttons under the text either by fixing their position OR

I can separate the “serenity …” text to a transparent png - can I put an image in place instead of slider text? so that it stays above the cta buttons?


I found this Replacing the slider text with an image

which is perfect for desktop/laptop

However, for mobile, it doesn’t contain the image file within the mobile display so it is trimmed at the edges and pushes the buttons out of view again.

I’ll keep trying and update further.

No luck for me.
If you can help with the css to change the .maintitle image to be responsive or an alternative way to achieve this, I’ll be very grateful.

Also, is it possible to keep the .maintitle image static rather than have it sliding in?

Thanks again


It looks like these issues require some coding and testing, this goes beyond our support policy. It’s considered advanced customization. As an option, you can contact Codeable for this kind of service, or find a reputable freelancer on Upwork.

Kind Regards, Roman.

I understand that you have the policy in place but I’m confused.

You offer some support which could be defined as advanced customization - as above.

All of the above is within your forums but not supported?

I do appreciate your time so far but if it is outside of your remit maybe that should be said from the start. I spent a day yesterday using code that you provided but it doesn’t achieve the goal. I could have used my time more wisely and gone straight to a third party.

Hello, I’ll try to clarify this.

  1. I offered the solution above because few lines of code are not considered advanced customization, especially considering that it is a modification of a solution that was posted before.

  2. I didn’t know about your additional issues when I posted that solution, I just tried to apply it on my local Sydney Pro install to make sure that it is working. It can be complicated to combine several modifications and make them work well together.

Kind Regards, Roman.

Thanks Roman. I was a bit reactive yesterday.

I do have a solution now too using the Header and Footer Scripts plugin and placing ALL of the following code into the footer scripts section:

.roll-button { margin: 10px; } .roll-button.button-slider { margin: 5px; width: 165px } .text-slider .maintitle{ background-image: url(''); background-repeat: no-repeat; background-size: 100%; background-position: top center; min-width: 466px; min-height: 237px; } @media screen and (max-width: 1025px) { {display: none!important;} .sydney-hero-area, .sydney-hero-area #slideshow, .slide-item { height: 620px!important; } .text-slider .maintitle { min-width: 380px; background-position: center center; } } @media screen and (max-width: 550px) { {display: none!important;} .sydney-hero-area, .sydney-hero-area #slideshow, .slide-item { height: 420px!important; } .text-slider .maintitle { width: 80%; min-width:0px; max-width: 310px; min-height: 172px; } }

You are welcome, and thanks for sharing it!

Kind Regards, Roman.