Mobile Display Issue

[addabble]

Hello,

I have some sections on my site that display nicely on desktop but look terrible on mobile. How can this be corrected?

Also, on mobile, my header and footer menus don’t work. How can that be fixed?

Thank you!

[ruenel]

Hello @addabble,

Thanks for writing in! In the Column Layout option in your row settings, please make sure that you have selected two columns on larger screens and one column only on smaller ones.

Large:

Small:

Extra Small:

If this is NOT helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[addabble]

And what can be done about the 2nd part of my question, the header and footer’s lack of functionality on mobile?

[ruenel]

Hey @addabble,

Please make sure that you have created your header and footer responsively. You may need to check out our video demonstration from here:

Best Regards.

[addabble]

I used one of the premade headers and footers from design cloud. How can I get them to work on mobile? Because the design cloud versions were responsive.

[prakash_s]

Hello @addabble,

In case if you have already installed the Header/Footer from the design cloud then you need to assign the Header/Footer to the page and Posts using.

Header and Footer Builders Overview | Themeco Docs

In case if you have assigned it still the issue persists please share your credentials in the secure note so that we can check your settings.

Thanks

[addabble]

I’ll provide credentials below. Thank you.

[nabeel]

Hi @addabble ,

Thank you for providing the credentials. I checked your setup and to make things easier you should add two Bars instead of having one (one for desktop screens and one for mobile devices) , To do this simply duplicate your Desktop Bar (Bar 1 in your case) to have the same Bar setup and rename it to let’s say Mobile Bar (see screenshot)

Inspect your Mobile Bar and remove the Navigation Inline element and add Navigation Collapsed element in replace of your Navigation Inline element

In the Mobile Bar settings and go to Customize tab and hide it for large screens (see screenshot)

Now you need to hide the desktop bar in smaller screens, to do this repeat the above process for Desktop Bar and hide your desktop menu in small devices.

Let us know how this goes!

[addabble]

That seems to have visually solved the issue with the header, however the menu and button still aren’t clickable on mobile. How can that be corrected? Per above, my footer is also having the same issue on mobile.

[ruenel]

Hello @addabble,

Are you using iOS or Android? I have tested your header on my android phone and I could not replicate the issue in your header. Kindly check out the video in the secure note.

Thank you.