Move Slider Title and Call To Action

We have a slider image that is a person with their hands in the air. The slider title is too low and runs across the face and the call to action button is too high.

I found this, but when I move the call to action button with this code, it also moves the slider title up as it moves the call to action down.

.button-slider {
margin-top: 350px;
}

We need to move the button and the title independently of each other. Is there a way to do that?

Hi,

Please post a link to your website and let me know exactly where would you like to have the title and where you want to have the button, so I can check if that’s possible.

Kind Regards,
Csaba

Csaba,
Thank you for your response. The site is not live. It is set to “Coming Soon.”

But I took a screenshot of it. We would like to move the button from where it is to where the arrow is pointing. When I used the above code, it also moved the words. The words are actually in a good spot.

Best Regards,
Chase

Hi,

I will need a link to your website to help you with this, unfortunately without I can’t help, so please post a link to your website and disable the maintenance mode or give me a user access to your website ( username / password ) in a Private Message, so I can access your website and help you to move the button.

Kind Regards,
Csaba

Csaba,
I have removed the “Coming Soon” from the site. You can visit it at http://ifeelworthy.com

Thank you for your assistance.

Best Regards,
Chase

Hi,

Please try this Custom CSS instead, but if you make the button to appear lower the title may also appear differently, because they are in the same container and the image is set as the background of the Slider section:

.button-slider {
    bottom: -200px !important;
}
  • Please modify the -200px value to any other value that may place the button where you want to have it.

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba

Csaba - Thank you. That did the trick for the button. However, when I removed the previous code that I used to move the button, which also moved the words, now the button is fine but the words are too low. Do you have a way to move the words back up?

Thank you again for all of your assistance.

Regards,
Chase

Hi,

You can move the text up with this Custom CSS:

.text-slider .maintitle {
    margin-top: -100px !important;
}
  • just modify the -100px value if you want to move it more to the top.

Please let me know how it works.

Kind Regards,
Csaba

Csaba,
Thank you. I tried that. I will check with the site owner and see if that is what they had in mind. I really appreciate your effort.

Best Regards,
Chase

Hi,

Ok. You’re most welcome! Please let me know if this is what the site owner wanted to achieve after you’ve checked with him.

Kind Regards,
Csaba

Csaba,
That is what they had in mind. It seems that there is a limitation though. No matter how much I change the -100px, it will not move any further up than where it is. Do you know why that is?

Regards,
Chase

Hi,

Yes, you can only move the text in it’s container, but you can move it anywhere inside header ( or even outside of it ) with this Custom CSS:

.text-slider .maintitle {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: -150px !important;
}

Please let me know how it works.

Kind Regards,
Csaba

Csaba,
That works wonderfully. Thank you. Exact result needed.

Might I ask you one more thing? On the slider, the title has an underline. Do you know how to remove it?

With My Best Regards,
Chase

Hi,

Yes, you can remove the slider title underline with this Custom CSS:

.header-slider .maintitle:after {
    display: none !important;
}

Please let me know how it works.

Kind Regards,
Csaba

Csaba,
That worked perfectly. Thank you so very much for all of your assistance. You have been very helpful.

Regards,
Chase

Hi,

Great! You’re most welcome! If you need help with anything else, please open a new topic.

Have a nice day!

Kind Regards,
Csaba