Advanced Accordion text alignment

Hi @jokubas2000k ,

Actually you can get it done with Custom CSS. Also if you define a class name from Elementor panel of your each Advanced Accordion widget and write CSS according that class name, It should not effect on all Advanced Accordion of your website.

Here is the full video that I made for you. In this video, I take two Advanced Accordion widget and define different class into it. And then I write Custom CSS for the first one only which will not effect on the second Advanced Accordion widget: https://d.pr/v/uuvJCv

So, The custom CSS will be for center the title of Advanced Accordion is:

.your-class-name .eael-accordion-tab-title {
    text-align: center !important
}

NOTE: This .your-class-name will be your defined class name that you set from Advanced > CSS Classes from Elementor panel of Advanced Accordion widget followed by the video.

Hope you understand.
Thanks!

Hi @abidhasan112,

Thanks, this helped but I have another question.

Is it possible to center the Toggle Icon as well? I would like the Toggle Icon to stay next to the Title on the left.

The custom CSS you provided centered the title but left the Toggle Icon to stay as it is: https://ibb.co/8nCCvMm

Thanks in advance

Hi @jokubas2000k ,

Add this CSS on your stylesheet:

.your-class-name .eael-accordion-header {
    display: list-item !important;
}

So basically you can just add display: list-item !important; inside your previous CSS that I gave you on my previous reply.

Let me know how it goes.
Cheers!

Hi @abidhasan112,

This did not help. I added this CSS:

.advanced-accordion-1 .eael-accordion-tab-title {
     text-align: center !important;
     display: list-item !important;
}

And here’s the result: https://ibb.co/bbmGmqP
display: list-item !important; just added some kind of dot under the Toggle Icon.

This is what I’m trying to achieve (this is photoshopped): https://ibb.co/YT1xcWj

Is this possible?

Thanks

I see @jokubas2000k !
Well, Remove all previous CSS according this and then just add this one:

.advanced-accordion-1 .eael-accordion-header {
    display: list-item !important;
    text-align: center !important;
}

Hope this will works in your case.
Cheers!

Hi @abidhasan112,

Thanks this worked; however, a black dot appeared on the left: https://ibb.co/CmyD31d

Is it possible to remove it? Or at least change the colour of it to white so it’s not visible.

Thank you for your help!

@jokubas2000k , I think that comes from your theme CSS. It would be good if you share your page url.

However, You can try adding list-style: none !important; in your previous CSS rule

So your final CSS will be,

.advanced-accordion-1 .eael-accordion-header {
    display: list-item !important;
    text-align: center !important;
    list-style: none !important;
}

Thanks!

list-style: none !important; worked.

Thanks @abidhasan112!