Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 2, 2019 at 11:47 pm #1086279
    micscr

    Hey guys,

    is it possible to style the advanced layer-slider’s indicator circles/bullets like in this mockup by the client -> https://ibb.co/F6dG74n via some CSS?

    I already managed to style its sizing, position and colors in another project but I’m wondering how to get done A) the spacing between the circles and B) the positioning at the bottom border with 50% of the bullets actually overlapping the slider.

    Not sure if B) is possible at all with some Quick CSS but would be great if you could provide a simple solution :)

    Thx, Regards
    Michael

    April 4, 2019 at 7:04 am #1086787
    Rikard

    Hey Michael,

    Could you post a link to where we can see the results you are getting please?

    Best regards,
    Rikard

    April 4, 2019 at 11:43 pm #1087249
    micscr

    Hi Rikard,

    sure, website is Under Construction so pls check credentials in private content field below.

    Spacing between the circles plus alignment overlapping the slider would be the results needed.

    Thx, Regards
    Michael

    April 11, 2019 at 4:23 am #1089344
    Ismael

    Hi,

    Thanks for the update.

    You can use this css code to move the slider dots downwards and outside the slider container.

    .avia-layerslider, .ls-fullscreen-wrapper, .ls-wp-container, .ls-wp-container .ls-gui-element, .ls-wp-container .ls-gui-element .ls-bottom-slidebuttons {
    overflow: visible !important;
}

#top div .avia-layerslider .ls-fullwidth .ls-bottom-slidebuttons {
    top: 13px !important;
}

    Best regards,
    Ismael

    April 11, 2019 at 12:09 pm #1089524
    micscr

    Cool, seems perfect, thanks Ismael! :)

    For those who are wondering, added this to size buttons and add margin between:

    #top .avia-layerslider .ls-bottom-slidebuttons a, #top .avia-layerslider .ls-nav-start, #top .avia-layerslider .ls-nav-stop {
height: 40px;
width: 40px;
border-radius: 40px;
margin: 0px 6px;
}
    • This reply was modified 5 years, 8 months ago by micscr.
    April 11, 2019 at 11:24 pm #1089759
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Layer Slider Navigation Bullets Styling (position + spacing)’ is closed to new replies.