Hello there,
Please provide us a screenshot with some annotations to point where the button should exactly be located at.
Use https://cloudup.com/ service to upload your image and share its link in your comment reply.
Regards,
Kharis
Hello there,
thanks a lot. Here you can find my provided screenshot https://de.share-your-photo.com/0a150e2daf I want the button where the red arrow ends.
When you click on the button “Straten Sie hier” the front page scrolls down to URL #primary Here https://de.share-your-photo.com/dbd87f8fd9 you will find another screenshot
Regards,
geoback
Hello there,
Try doing the below steps:
1. Install and activate the TC Custom JavaScript plugin
2. Go To Appearance > Custom JavaScript
3. Paste the following code into the provided box
(function($){
'use strict'
var slideButton = $('.sydney-hero-area .header-slider a.button-slider');
if( slideButton.length ) {
slideButton.each(function(){
$(this).wrapAll('<div class="slide-button-wrapper"></div>');
});
}
})(jQuery);
4. Update
5. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
.header-slider .slide-inner {
min-height: 100%;
top: 0;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.header-slider .text-slider {
position: absolute;
width: 100%;
top: 40%;
}
.slide-button-wrapper {
position: absolute;
width: 100%;
left: 0;
bottom: 25px;
}
Regards,
Kharis
Hello,
this worked great for us. Thank you. Now the Button is where we want it to be 🙂 Can we change the square form to a circle form ? Here an example https://de.share-your-photo.com/793fc18b0f
Best Regards
here another idea: can we link a photofile like .jpeg or .png to the “call to action button”? So we could work with an indivual source and change when needed …
Hello there,
Try adding this CSS code:
.header-slider a.roll-button.button-slider {
display: inline-block;
width: 150px;
height: 150px;
padding-top: 45px;
font-size: 18px;
text-align: center;
border-radius: 100%;
}
Regards,
Kharis
thanks, it work great for us. We addes the CSS code to Appearance > Customize > Additional CSS from dashboard
Regards,
geo back
upps, the text in the middle of the button is not fitting in the middle, it seams to be more in the right side. Please have a look at my screenshot https://de.share-your-photo.com/85153146a1
Please provide me a link to your site here, so I can check and troubleshot it directly. We might only need little code changes in there.
Regards,
Kharis
Hello there,
Thank you for sharing. Try this code:
.header-slider a.roll-button.button-slider {
display: inline-block;
width: 128px;
height: 128px;
padding-top: 53px;
font-size: 18px;
text-align: center;
border-radius: 90%;
}
Regards,
Kharis
thanks, this works great. Now the text is in the middle.
Best Regards,
geo back
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