Mobile Responsive Menu & Hero Theme Size

[Jeffrey]

David & Emily, I notice two things regarding the Stax Theme that I am concerned about.

The first is how do you show a sub-menu in mobile mode? After creating a navigation menu, one of my menu items has two items for a sub-menu. It works in standard desktop mode, but the sub-menu does not appear in mobile mode. Why not? How can we correct this?

Second, I’m using the hero block with video as background for the first block under the logo and navigation menu. Initially I set the hero block to show arrow down, and positioned the content in the bottom middle (one of the 9 choices) and set it for full window height. But when I checked it out with my smart phone, it did not show the first line of the headline and it put the words from the second and third lines of the headline over the logo image. Then when I switched the setting to off (so it is not at full window, everything shows) it showed fine on mobile, and ok, but not ideal on desktop.

Is there a way I can set it to full window and have it show up good on mobile? If so, what do I need to do?

[David Morgan]

Hi Jeffrey,

No problem. We’ll be happy to help.

1. The STAX theme features menu options for secondary mobile menus. However, it requires creating a new menu within the Appearance > Menus section of the WordPress dashboard. Once, you’ve created your mobile menus, you can apply them to the Header Block within the Appearance > Editor section of the admin by clicking on the Header Block to revel the menu options. I’ve attached a screenshot displaying the options.

The theme does not display drop downs for mobile, primarily because dropdown menus in mobile can be confusing and prevent parent pages from being clickable. As a result, it’s recommended that separate mobile menus are created.

2. Can you provide a link to your site so we can inspect this issue? We can either provide a quick CSS fix, or update the theme and/or Organic Blocks plugin to resolve the issue once we’re able to assess it by viewing your site.

Thanks!

Attachments:

You must be logged in to view attached files.

[Jeffrey]

Ok, great. I was able to create the mobile menu.

I sent you an email with login info to login to the site
to review the hero block full height issue when viewing
on mobile devices, like an android smartphone.

Thank you in advance for your help to resolve this.

[David Morgan]

Hi Jeff,

No problem! We addressed the issues in your email. 🙂

Thanks!

[Jeffrey]

Yes, thank you for everything! One question I have is about mobile devices and viewing of the site. I use an android and love the look of the site on my device. However, a client uses an iphone and says the site content does not appear right. I have not been able to see what is is that they are seeing. Is there any difference in viewing the site with an android vs an iphone or other type of Apple device?

[Jeffrey]

Yesterday I used my Samsung Android SmartPhone (5G) and viewed the site with the Stax Theme and it looked great. The video background from the Hero block looked great.

Then I asked a relative with an iPhone and although the site looked about the same (with some words in the headline on a different line that what appeared on the android) the video background in the Hero Block did NOT play. Why not? What could be causing the video background not to play in the Hero Block on an iPhone when it plays fine on an Android?

The iPhone I tested this with was from a few years ago.

Does the Hero Block video background play on all iPhones? Or does it only play on newer versions of iPhones?

[David Morgan]

Hi Jeff,

Background videos in mobile are “iffy” at best depending on the platform, browser, etc. However, as a general rule, WordPress itself prevents background videos from display on mobile devices.

As a result, we added a “Custom Image” option to the background media options for the Hero Block to act as a fallback image for mobile devices. See attached screenshot. I recommend adding a fallback image, and I generally use a screenshot of the video as my fallback image on personal sites.

I hope this helps.

Thanks!

Attachments:

You must be logged in to view attached files.

[Jeffrey]

Hi David, My client who uses an Apple iphone and another team member who also uses an Apple mobile device both have stated the site I created using the Stax theme looks lood and functions well in desktop mode, but not so much on their apple smartphones. They say there is an issue with the menu not loading and opening pages. Is there a settings issue I may have missed?

I created a mobile menu and am using that. But I do not really know whether or not I should have any of the four boxes check under Menu Settings – these buttons include 1) automatically add new top-level pages to this menu, 2) main menu, 3) secondary menu and 4) social menu.

I sent you the login to the site from my email a few days ago. Please check this using your Apple mobile iphone device and see what you can recommend to fix this issue so it can be a good user experience. Thank you in advance.

[Jeffrey]

David, here is an update to my message from yesterday here on the forum. The issue the client is having with the mobile menu when using apple iphone and ios devices is that after clicking on the menu (pancake of 3 horizontal lines) it shows the pages available, but when they click any of the page links in the menu, it freezes. So the are not able to navigate from the home page to any of the other pages. They showed me this when they used both Safari and Google Chrome browsers. When going to the menu on both browsers, the menu failed to open the pages after they clicked on it. Can you fix this?

[Jeffrey]

actually – its the messages from Tuesday Dec 6 and today Dec 8.

[David Morgan]

Hi Jeff,

No problem. This was a recently discovered bug, and a tricky bug! Basically, the theme was trying to pull a default background image from our local development server that is not accessible online, and that was causing a hang in mobile browsers.

Updating to the most recent version of STAX should resolve this issue. Or you can manually remove/replace the default image for the Hero Block in the site editor.

Let us know if you need further instruction, or if the theme update resolves the issue.

Thanks!

[Jeffrey]

David, Thank you for your prompt reply. I updated the theme to its latest version 1.1.4.1. However, my client is still experiencing the problem when using an apple device. They went to the site URL in an incognito browser on their apple device, e.g. iphone. The home page loaded (a little slow) and they were able to see the menu (the three horizontal lines) and were able to click on that to see the page options. But they were unable to click any of the page links inside the menu. The funny thing is if you add the page name to the end of the url it could open the page, but NOT from the menu. The thing is – as you know – about half the population uses Apple devices, so it is imperative for us to resolve this issue.

I have NOT manually removed or replaced the default image in the Hero block, since you suggested the theme update would resolve the issue.

Thank you in advance for further investigating and resolving this issue.

[David Morgan]

Hey Jeffrey,

Ah, that makes sense. Since your client imported the demo content before the links were updated, they’ll need to remove the default custom images for those banners within the editor. This can be done following these instructions:

1. Navigate to Appearance > Editor > Template Parts > Banner Default.
2. Click on the Hero Block to reveal the block options.
3. Click the “Remove Image” button for the Custom Image option.
4. Repeat this process for the “Banner Post” template part.

Once removed, the site should then load quickly on the first click within mobile browsers.

Let us know if this works.

Thanks!

Attachments:

You must be logged in to view attached files.

[Jeffrey]

David, I executed your instructions in removing the images in banner default and banner posts. Then, my client’s team member tried again on his iphone and still is experiencing issues, especially the navigation menu not working after clicking on a page option. See the attached video (the video is not very clear)

Attachments:

You must be logged in to view attached files.

[David Morgan]

Hi Jeffrey,

Interesting. Can you please provide your clients website address? Also, their WordPress login information within a private reply?

That way we can take a closer look and inspect the page code. My hunch is still that their site is trying to load a resource from our local development server, but I’ll need to inspect their site to determine what resource is trying to load.

Thanks!

[Author]

Posts