A way to nudge arrows

Beaver Builder
1

Hi Beaver Builder

On the frontpage of http://www.se-f.dk/nytdesign/ (second block below header) I have a carrousel module. I would like to move the arrows outside the transparent frame. I tried a lot og things, no succes and hope you might be able to help with a css fix.

Thanks in advance
Best regards
Jette

2

Hi Jette,

We can, but I am not sure how this will affect your theme. As, they’re using 'overflow: hidden; on their .block class. Which I had to override for the navigation arrows to display.

However, you’re free to try it. Simply use the CSS below and change the values to your needs.

#block-bmp56ceef8e55faa.block {
  overflow: visible;
}
.fl-module-post-carousel .fl-post-carousel-navigation {
  left: -40px;
  right: -40px;
}

Thanks,
Danny

3

Hi Danny

Thank you, it worked! Another question, is it possible to find or set an id for each individual element within the slider? I want to link them to a different url than the posts themselves.

Best regards
Jette

4

Hey Jette,

Glad to hear Danny’s code worked! Not possible to set ID’s on individual post elements though. Sorry! It is, however, possible to select each element by setting an ID on the post carousel module then using that in the selector then use nth-child. Give it a go and let us know how it goes.

Jun

5

Hi Jun

Thanks, would you be kind to explain a bit further? I am not familar with using the nth-child. I have set the ID for the carousel to be frontpageslider.

Thanks in advance
Jette

6

Hey Jette,

Sure, though I’m not quite sure what you want to do with the selector but it should let you select the posts individually. Nth-child lets you select a specific child of a particular element, so for instance if you have a ul and li’s under it, you can select the first li like using ul li:nth-child(1), the third ul li:nth-child(3) and so on. So you can individually style them in CSS or select them in jQuery just like you would if they had unique ID’s.

Jun

7

Hey Jette,

To elaborate more, you can put the following code to change the color of the 9th post of the post carousel in your site.

#frontpageslider .fl-post-carousel-wrapper .fl-post-carousel-post:nth-child(9) {
    color: blue;
}

Jun