Accordion indicator/toggle icon alignment

[krtyler05]

Hi There,

I’ve tried combing through the forum and trying my own CSS with no luck.

I’m wondering how I can align the indicator/toggle icon to the top. I’ve put some accompanying text with my header and have embedded a form in the content section.

Right now, the icon is vertically aligning to the center.

Here’s what the accordion header currently looks like:

How do I get the toggle icon to vertically align to the top where the header text begins?

Thank you so much!

[ruenel]

Hello Katie,

Thanks for writing in! Please be advised that the icon should always display at the middle of the headline title for the accordion. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Meanwhile, please also provide any of the custom css that you have added so that we can inspect it.

Best Regards.

[krtyler05]

Thank you Ruenel! Here’s the link to the accordion:

Test Page | Crosshatch Studio

I’ve added this to my global CSS settings:

.x-accordion-toggle.{
vertical-align: top;
}

Ideally, I’d like for the accordion to display like this, where the toggle stays at the top of the heading section when open and closed:

Thank you again for your help.

[nabeel]

Hey Katie,

You can remove your CSS and instead add the following code in the Element CSS of the accordion element:

$el .x-acc-header-content {
    align-items: baseline;
}

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• Complete Flexbox Guide - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Hope this helps!

[krtyler05]

That worked PERFECTLY. Thank you so much nabeel!

[friech]

We are delighted to assist you with this.

Cheers!