Accordions stopped working on mobile

Support
#1

Hi there,

Could you please help me fix a couple of problems with the site below - they occured after a recent X update:

  1. The accordions are not working correctly on mobile devices on these two pages (fine on desktop):
    http://astilltreecare.co.uk/astill-treecare/what-we-do/
    http://astilltreecare.co.uk/astill-treecare/who-we-are/

(I’ve just noticed there is an additional ‘/astill-treecare/’ reference in the above URLs which wasn’t there before the update!).

  1. On desktop, the menu items in the navbar drop into the slider when the browser window is shrunk and is not small enough for the burger menu to appear.

Thanks very much for your help with this. I’ll put the login credentials in the below.
Matt

#2

Hi Matt,

1.) Can you give us more details? It’s working when I check:

2.) It happens because the logo is too large. 600px. At around 1285px browser width and below, the logo and menu cannot be side by side anymore because it doesn’t fit inside one row. I will assume you don’t want to adjust the width of the logo because the text in it will not be visible enough. The best option for now is to make the logo and menu stack. Go to Theme Options > Header > Logo and Navigation: Choose Stacked

Hope this helps.

#3

Hi Lely,

Thanks for your help. I’ve fixed the menu drop issue now thank you (it was the Nav Bar Link Alignment in the end).

I’ve attached two images of the accordions, you can see the text is just layered over the top and the other accordion titles don’t move. Also, oddly, the text extends down below the accordion, below the slider and into the menu (image 2)! This happens on my iPhone 6 Plus, and three of the client’s phones/tablets (not sure what they are).

Thanks for your help.
Matt

#4

Hi Matt,

I have checked on an iPhone and the accordions are displaying correctly.

Have you tried checking in another iPhone if the issue persists, kindly check and have the phone’s cache cleared and try again.

Hope this helps.

#5

Hi Jade,

Thanks for looking — did you open the accordion items because that’s when they break? I’ve checked on a second iPhone, and also cleared the cache on Safari on my iPhone, and then installed a brand new browser (Firefox), and I get the same result ie. the subsequent accordion items don’t move down to make room for the clicked item’s content.

Also, once an accordion item has been clicked on, the main nav burger menu stops working.

Can you please have another look?
Many thanks,
Matt

PS the URLs have now changed because the X update added the home page as a parent to each page, which I’ve now removed:


#6

Hello @TheoryUnit,

I have checked your site on my mobile phone and I could not replicate any issue.

Can you please use private browsing mode or incognito mode in your phone and test your site again?

Please let us know how it goes.

#7

Hi RueNel,

Thanks for looking into this. Okay, I fixed it — I have a bunch of accordion CSS code and I simply put “important” in each one and that fixed the problem.

Why you guys didn’t experience it I’m not sure, maybe it was an international location thing — in fact, did Brexit break my accordions?!!!

Cheers!
Matt

#8

Hello Matt,

You are most welcome.
If you need anything else we can help you with, don’t hesitate to open another thread.

Best Regards.

#9

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