Okay
  Public Ticket #3525476
Buttons on Nectar slider not aligning correctly
Closed

Comments

  •  1
    Simon started the conversation
    November 20, 2023 at 9:40am

    Hello, since updating to Salient 16.1.1 (from 16.0.5) I noticed that the alignment of buttons on the Nectar sliders are now incorrect.

    They are set to be aligned centre, but they are displaying aligned to the left. Please see attached screen grabs. This is happening on all Nectar sliders:

    https://www.basementphoto.com/

    https://www.basementphoto.com/home/

    And the issue is also happening on another site that uses the Salient theme and that I have recently updated:

    https://kmibrands.com/

    Please can you look into this and advise on how this can be corrected. I have tried changing the button alignment and re-saving in the admin area but it does not seem to change anything.

    Thank you

    Simon

    Attached files:  slider.jpg
      admin.jpg

  •  3,001
    Andrew replied
    November 20, 2023 at 12:32pm

    Hey Simon,

    Thank you for getting back to us.

    Please check and confirm that the Nectar Slider Slide Content Alignment is properly set up to center align your slider content.

    9792864745.pngTry that and let us know how it goes.

    Kind regards,

  •  1
    Simon replied
    November 20, 2023 at 12:45pm

    Hi Andrew

    Thank you for replying.

    However I am not sure what you mean :-) Did you look at my original screen grabs of the settings?

    The buttons used to be centred on the slider along with the text on the front end. 

    Since updating to the latest version of Salient, all the buttons on the sliders are now horizontally aligned left on the front end. 

    However the setting in the slider back end admin area for the buttons is "Centered".

    So the text is centered but not the buttons... and they should be.

    I have tried changing the Horizontal Alignment and resaving the slider, and then changing the alignment back to "Centered" but this seems to have no effect. The button stays aligned left.

    Is there a bug in the theme? Would you like access to the admin area to see for yourself?

    Best

    Simon

    Attached files:  Screenshot 2023-11-20 at 12.38.07.jpg
      Screenshot 2023-11-20 at 12.38.40.jpg

  •  3,001
    Andrew replied
    November 20, 2023 at 1:13pm

    Hello Simon,

    Thank you for getting back to us.

    To assist you better, we'd love to have a closer look at your setup and to do this, we'll need admin login credentials (dashboard URL, username, password) to your site. This will enable us to conduct a more in-depth investigation of the issue based on your specific configurations. Would you mind sharing this with us? 

    If you prefer, you can safely share the access through a one-time secret note or using an access plugin such as Controlled Admin Access.

    Before you provide this information, we strongly recommend taking a backup of your site.

    If you have any concerns or questions about this process, please don't hesitate to let me know.

    Best regards,

  •   Simon replied privately
  •  3,001
    Andrew replied
    November 20, 2023 at 4:54pm

    Hey Simon,

    Thank you for getting back to us.

    Thank you for getting back to us and I have notified the developer of this issue. In the meantime, to center alight the buttons, you will need to add some custom CSS code. To do this, please follow these steps:

    From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:

    .swiper-slide[data-x-pos="centered"] .buttons {
  justify-content: center;
}

    Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related. If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help. 

    Try that and let us know how it goes.

    Kind regards,

  •  1,921
    Judith replied
    November 20, 2023 at 4:59pm

    Hi Simon,

    Thanks for writing back.

    To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:

    From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:

    .swiper-slide .content .buttons {
    display: block;
}

    Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related. 

    If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help. 


  •  1
    Simon replied
    November 20, 2023 at 5:00pm

    Hi Judith and Andrew

    Thanks for getting back to me. Which snippets should I be adding? Both?

    Best

    Simon

  •  8,939
    Tahir replied
    November 20, 2023 at 5:16pm

    Hey Again,

    Use only the below:

    .swiper-slide[data-x-pos="centered"] .content .buttons {
    display: flex;
    justify-content: center !important;
}

    Thanks

    ThemeNectar Support Team 

  •  1
    Simon replied
    November 20, 2023 at 9:52pm

    Hi Everyone – thanks for the quick fix. I have added Tahir's code to both the sites and it is working perfectly at the moment thank you.

    I look forward to the fix being rolled out in an upcoming release.

    Thanks again.

    Simon

  •  1,921
    Judith replied
    November 21, 2023 at 5:33am

    Hi Simon,

    Glad this works for you.

    Please feeel free to write to us in case of any other queries.

    Best Regards.