Move the Slider Titles/Button with CSS


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


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


We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.



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

    • 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

    Hi,
    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

      Tom,

      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.