[Resolved] mobile view missing hamburger & search

[Vince]

I’ve got navigation below the header, and no logos/images set in the header [nor nav]. When I use the WP customizer, I see the search icon and the hamburger icon on the nav bar, but when viewing on my iPhone 6s, I don’t.

iPhone:

Customizer:

I’ve not done much in the way of customizing the site at all yet. One thing that may be related is that I don’t have mobile header enabled [even when it is enabled, the above issue is the same] as having the mobile header without uploading an image seems to disable the header in mobile view.

The only customization I have is using GP Hooks and basically copying the video example, and enabling text above the header stating the site is being worked on.

Thanks for any info you can provide!

[Vince]

Ugh….I loathe replying my own post, but I found the solution – it was the content blocker, Firefox Focus, that I had enabled on Mobile Safari. The irony, is that I loaded the site in Firefox on the iPhone [which uses the same rendering engine as Mobile Safari], and the magnifying glass and hamburger icons were both present. So I reviewed my content blockers for Safari and had one enabled – care of Firefox.

So I guess my question changes to – why would those 2 elements be blocked by a content blocker? The site lacks any ads, so there is no reason for a content blocker to block any 3rd party element.

[Tom]

Interesting, so the content blocker was blocking Font Awesome icons. Are all icons on your site blocked? The back to top icon, categories, tags etc..

[Vince]

You are correct – Firefox Focus does in fact block the tags, category icons, as well as the google fonts used! I don’t use the back to top icon, so I can’t test that, but I’d guess it does as well. I’ve moved to a new content blocker, but that doesn’t seem very nice of Firefox Focus to block both Font Awesome and Google Fonts. 🙁

[Tom]

What happens when you go to fontawesome.com? Are all the icons blocked?

[Vince]

Visiting fontawesome.com with Mobile Safari and Firefox Focus as my only content blocker, I am able to view the icons on that website.

My guess is that somehow Firefox Focus thinks both Google Fonts and Fontawesome are serving ads, but since they are so popular, that seems very unlikely.

AdBlock, another content blocker, allows both sites’ icons to show up no problem, so I’ve switched to that, but I should do more investigation and see if other themes that use both Google Fonts and Font Awesome are affected by Firefox Focus’ behavior.

[Vince]

Doh! As soon as I sent the above, I looked into Firefox Focus’ prefs – there is a “block web fonts” feature to speed up performance, and that is checked by default. Issue solved. So sorry to waste your time with this!

[Tom]

No problem! Glad you got it sorted 🙂

[Author]

Posts