Get Started button not working on mobile view

Support
#1

Hello,

I need some help with the Get Started button near the top of my home page. https://franchisin4stg.wpengine.com/hometest/ . The button works fine on a laptop / desktop but does nothing in a mobile view. After reading a few other posts on this issue I have attempted disabling all plugins and clearing the cache on the website and on the browser on my mobile device. None of this made any difference. Would you be able to shed some light on what may be causing this, and a few other buttons on my website, to stop working on mobile devices?

Thanks!

#2

Hey @MSITAdmin,

Thanks for reaching out!

I’ve checked your get started button on the desktop and you have added an anchor link to #my-footer while on the mobile it is only #. Please update the link on your mobile view.

Hope that helps.

#3

@marc_a,

Thanks for getting back to me but I’m not sure if I’m missing something or if I’m not following what your saying. When I look at the Hero Mobile section with the button for the mobile view I do see #my-footer in the URL for the button. Are you seeing somewhere else that I need to set the link?

Thanks!

#4

Hi @MSITAdmin,

I have checked and found that the Bar containing the my-footer is set to hide. And that is why the button is not working. I have also found that in a few breakpoints, the section under the button is overlapping it and that is why it is not clickable.

image - 2023-10-11T161553.324
image - 2023-10-11T161553.3241200×421 222 KB

Hope it helps.
Thanks

#5

@tristup,

There are 2 sections for this depending on the screen size. For laptop / desktop screen sizes the Hero Main section displays and on the mobile screen sizes the Hero Mobile section displays. The Hero Main section works fine on Desktop / Laptop screen sizes. The problem is the smaller screen sizes. They are displaying the correct section (as far as I can tell) however the button is not working. I did find that the Momentum section was overlapping the Hero Mobile section, effectively covering the button so I updated the Z-Index and moved the Momentum section so they are no longer overlapping. During my testing, what I’m noticing, is that after I click the Get Started button, the web address is being updated with /#my-footer but the page is not being scrolled to the footer. Do you have any other suggestions as to what is causing this to not work?

Thanks!

#6

Hi @MSITAdmin,

If you have set the bar hidden in the mobile, the page will not scroll. I would suggest you remove the hide option and then check in the smaller screen. As the parent element is hidden the ID for my-footer is not been able to recognized.

Thanks

#7

@tristup,

I’m sorry but I’m not following what you are saying. For the button in the responsive bar (for mobile screens) to work, the bar for the desktop / laptop view also needs to be visible? I have the Get Started button in both bars.

Thanks!

#8

Hello @MSITAdmin,

You have set the “Get Started” button element on the Header which is visible on the larger screen and you have not added this button element on the Mobile Header bar or small screens bar. You need to copy this button element and insert it into the small screen Header bar as well to display the button on the small screen. If it doesn’t work, please share your details in a secure note. Please provide the following details

  • WordPress Login URL
  • Admin-level username and password

You can find the Secure Note button at the bottom of your posts

secure-note
secure-note1040×250 15.3 KB

Thanks

#9

@prakash_s,

I see said the blind man. I think we are looking at two different Get Started buttons! I have been focusing on the Get Started button in the image with the Red M background, building location, and “Build the Best” headline. I didn’t realize the button in the nav bar was not working either.!

here:
image|640x500

I will look further into the nav bar button but can you advise if something is wrong with this other button? Maybe the same issue though I’m 100% sure we copied the button from the desktop view after getting that part working properly and put the copy in the Hero Mobile section.

Thanks!

#10

Hey @MSITAdmin,

Apologies for any confusion. I observed the presence of the “Get Started” button in the menu section. After my investigation, I discovered that the “Get Started” button at the top of your homepage is linked to #footer . On desktop, there is a bar with an ID of footer which functions correctly. However, in the mobile view, the “Get Started” button at the top is still linked to #footer , but the displayed bar in the footer does not have the ID #footer , causing it not to function as intended.

Hope that helps.

#11

@marc_a,

What you are saying makes sense to a point. How do I set the ID for the mobile footer? I used cornerstone to create a footer “Primary Footer” and have that applied to all pages both desktop and mobile.

Thanks!

#12

@marc_a,

Thank you for the help on this issue, I found where to set the ID and the button is now working on both desktop and mobile.

#13

You are most welcome, @MSITAdmin.

#14

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