Public Ticket #2445659
edit to navigatioin arrows


  • Colleen Simpson started the conversation

    Under the second menu (explosion protection), the first drop down menu, had > and < as the arrows for the user to navigate. I would prefer them to be off the image (since the image is hyperlinked) and also a bit less long. I would rather they look like a normal 50x50 icon of an arrow or something. I have navigated through all the different skin options (trying out the different icons) but I haven't found one that is not hovering over the image and/or large. Am I missing something?

  •  93
    Kristof replied

    Hello Colleen,

    Thank you for getting in touch with us!

    You should try to use slide navigation buttons instead of prev / next buttons or use the skin editor.

    The LayerSlider WP skin editor offers you a graphical way on your WP admin area to modify LayerSlider skins without the need to work with files on FTP. The Skin Editor automatically detects additional content, so you can customize skins from other sources as well.

    You can reach the Skin Editor by clicking to Options in LayerSlider WP side menu.
    Please note, that editing a skin requires some basic CSS knowledge.

    Best Regards,
    Kristof Molnar | Kreatura Support Team

  • Colleen Simpson replied

    I've got these sliders operating in a drop down menu, so the buttons are too much for the users. The arrows would work if they were not so big or in the way of clicking through on the image. 

    So, if not using the slide navigation buttons, trying to use the skin editor, I see these v6 arrows are driven by this code.

    <a class="ls-gui-element ls-nav-prev" aria-label="jump to the previous slide" href="#" style="visibility: visible; display: none;"></a>

    #ls-global .ls-nav-next

    Would you help me with the css code? I think these arrows are 40x50 but if they were 25x25 & no so centered on the image (to prohibit click through). Also, where do I find the # to replace? I assume that is in the "slider setting" but can't find it. 

    Thank you

  •  93
    Kristof replied

    Hello Colleen,

    Thank you for your feedback!
    If you would like to reduce the arrows size, you should try to add this custom CSS code:

    .ls-gui-element.ls-nav-prev:after, .ls-gui-element.ls-nav-next:after {
    width: 13px !important;
    height: 13px !important;

    What would you like to add to the href instead of #? 

    Best Regards,
    Kristof Molnar | Kreatura Support Team