Accordion in Pro Header

Hello,

Having a bit of problem with Accordion in Pro Header. After clicking Accordion Button and it opens. The button is hidden and i can’t close it.


Hi @SydeL

Try to set your bar elements height to auto

If that doesn’t help, please provide us the exact url of the page where we can see the issue.

Thanks

It didn’t work! On mobile its even worst. The Top Filed of form is hidden.

Link: https://renoestate.ca/property-search/

Hi There,

Thanks for the URL,

Can you share your login details in a secure note too?

We can take a closer look on the issue.

Thanks

Hi Sydel,

As given in the screenshot, please also changed the flex vertical layout to Start instead of Center.

Thanks!

Tried it. Didn’t Work.

Hi @SydeL,

Ah, I thought you also applied the changes recommended by Paul, it still in 100px. I went ahead and change it. I also added a min-heght CSS to your container in case you really need the 100px height.

Please check again.

Thanks!

It’s still not working as smoothly as i would want it work. Is there another way to add this form in header. And make it Desktop and Mobile compatible?

Hi @SydeL,

It’s only possible that way since you’re using a custom header with flex layout. And it’s not smooth because of the flex layout and alignment. The header is only good for menus when the expansion is not restricted by the height itself.

I tried some CSS to make it smooth but no luck since it’s already smooth but looks like jumping since the accordion height changes while the flex is trying to align it responsively.

Thanks!

Thanks for trying! I will try another way to display the form.

No problem.
If you need anything else we can help you with, don’t hesitate to open another thread.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.