How to make slider nav buttons round instead of oval?

Design help General
1

Hi there! Just curious - I’ve got a slider going on my page, but I cannot for the life of me figure out how to edit the individual slider nav buttons. Right now they are looking more oval than the circle I’d prefer:

17%20PM

Any tips on how to adjust this? Thank you!

Here is my site Read-Only: LINK

**Side note: I’m REALLY loving Webflow so far…muddling through, but LOVING it! :slight_smile:

2

% is used to define their radius, hence the possibility for them being oval rather than round.

You can add custom code to have more rounded corners

.w-slider-nav.w-round > div {
    border-radius: 20px!important;
}

Still you won’t get perfect discs because the dimention changes depending on the digits inside.

http://vincent.polenordstudio.fr/snap/rcoq3.jpg

To have perfect pixels you need to force some dimensions.

.w-slider-nav.w-num > div {
    width: 30px!important;
    height: 30px!important;
    padding: 4px!important;
}

http://vincent.polenordstudio.fr/snap/hin65.jpg

1 Like
3

Thank you @vincent! Being a new user here, is that code something I’d need to add into the custom code area of the page settings?

If that code is inserted, is it something you can see change dynamically, or does the page have to be published out first?

Thanks again!

4

if you add the code inside of a custom code box inside the page then you’ll see the effects right in the designer.

Wrap the code into <style> ... </style> tags.

1 Like
5

@vincent - thank you kindly!

6

Sorry I was on mobile. Did you succeed? Here’s the complete code:

<style>
.w-slider-nav.w-round > div {
    border-radius: 20px!important;
}
.w-slider-nav.w-num > div {
    width: 30px!important;
    height: 30px!important;
    padding: 4px!important;
}
</style>
1 Like
7

@vincent Oh, no worries at all - thank you again! I’m assuming this works - unfortunately I haven’t had a chance to try it out yet since custom code embed isn’t available to people on free plans. :frowning:

8

@vincent I finally had a chance to implement this code into my site and it worked like a charm - thank you again for your help!! :+1::+1::+1:

9

Hurray for round buttons! Thanks for telling me.

1 Like