Menu behaving strangely on mobile

Hi, have a look here: https://ryanbarrettlaw.com/

So the menu should scroll to the sections on the homepage, about, and FAQ, and it does, on ipads, laptops etc, but on mobiles, it doesnt scroll to the about, or scroll back to the top when you click home…

This video shows more:

Also how do I just the offset for the the scroll anchor? right now where it scrolls to, the menu is covering the text, Id like it to scroll to 90px above where it should scroll to.

Thanks.

Hello @oriol,

Thanks for writing to us.

To help you with your concerns we need to check your settings, I would request please share the admin login details meanwhile I would suggest you troubleshoot a few of the common issues before we investigate your settings. 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

Thanks

See secure note. Thanks.

Hey @Oriol,

Your Home menu item is linked to #top. Be advised that there is no element on the page that bears the top name or ID. You may need to edit your custom header and add the ID to the Bar element.

As for the gap, please edit the page and add a uniform top and bottom padding for your Sections to at least 90 pixels or more.

Hope this makes sense.

Hi, sorry, this doesn’t really help the issue, the scroll to the top of the page #top works…the actual issue is described in my original post. Thanks.

Hey @Oriol,

Try this:

You have created 2 Section elements for the About us. The first Section has the ID about and this is only visible to large screens. The 2nd Section is for smaller screens but do not have have the ID which is why linking #about will not work on smaller screens. The Section is hidden away.

To get you issue resolved, remove the “Hide During Breakpoints” option for the first Section, the one with the about ID and then merge the Row element from the 2nd Section. The set up would be like this:

The output will be like this:

Hope this makes sense.

That has worked, however, The background color needs to be different for the mobile view, I have set it, but it doesnt seam to change? It should be a solid color, but its still showing the gradient.

I had to change the other colors to a gradient of the same color for it to work.

Hey Oriol,

We’re glad that you’re able to find a solution to your issue.

Thank you.