Move the Slider Titles/Button with CSS

Note : the following code snippet requires advanced WordPress developer skills. There's no guarantee that this snippet works as is with the latest version of our themes, and with the latest version of WordPress. That's why you need to always test any code snippets in a staging environment before implementing it in a production site.

Last Reviewed: 4-Apr-15 (3.3.13) 3.1.* 3.2.* 3.3.*

There are many different solutions to repositioning elements using CSS. This snippet uses one solution: position:relative/top/left which allows you to move the element in relation to it’s usual position. However, it does not provide a fully responsive solution and will need further @media code to make adjustments for different devices.

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.


Related Snippets you may also like

22 thoughts on “Move the Slider Titles/Button with CSS

  • Ben

    Hi Dave and Nick,
    Thank you both for all of your hard work. I have recommended this theme to several already. My question is: I input this snippet into the custom CSS and it worked beautifully…. for the full sized screen and the partial sized screen. However, when it re-sizes to the mobile screen the text box is off the slider and not visible. How do I fix this?

    • Ben

      Here’s the updated code that fixed the issue;

      .carousel-caption {
      width: 60%;
      vertical-align: bottom;
      margin-left: 0%;

  • Mari

    How do i move the text and bottom to the bottom left or right of the slider? The instructions at the top didn’t work. Thanks

  • Aaron

    I would like to move the caption just below the image, so the image goes unblocked. Thanks for your reply in advance.

    • Dave Bardell Post author

      Sorry for not responding sooner and for this standard reply:

      I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.

  • Beth

    Hi, I copied and pasted this example into the editor page of my child theme and it didn’t have any affect.
    I then put it into the css section of the main customizr edit page, and still nothing happened… can anyone please tell me what it is I’m doing wrong? Thanks

    • Dave Bardell Post author

      Hi Beth. It should work in the CustomCSS panel, or in a Child Theme style.css. If not, I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.

  • 2Chol

    Sorry for my English … and thanks a lot for this Customizr theme, is really amazing !!
    So, I have a question about the slider of the theme :
    Is it possible to change the current ratio of the image size (currently 1170 x 500), by a ratio of 16/9, without cropping images?

    thanks for your reply.

  • Michael D'Amico

    Is there a way to get the slider images themselves to respond to a click rather than having a Link button at all? It seems like a natural and cleaner presentation than a button parsed a top pretty slider image.

  • Tom

    I just tried to execute moving the slider titles/button per the instructions above (in the Custom CSS of my child theme), but nothing happened at all. Am I missing something?

    Thanks so much for all your help in this awesome support forum!

    • RPeterF


      I just pasted the code snip and it worked just great (thanks, Dave!). As you probably know, you have to play with the pixels at the bottom.

Comments are closed.