Singl on Mobile: menu icon disappears from header after page is fully loaded

I can replicate the mobile issue on your site just by making the browser window smaller.

I don’t see the same issue on the demo site here:
https://singldemo.wordpress.com/

I also activated Singl on a self-hosted test site and the menu worked normally there as well.

Have you made any CSS or other changes to the theme? If you have, try undoing them to see if the issue goes away.

If you haven’t made any changes to the theme, another troubleshooting technique is to temporarily deactivate your plugins. If the issue goes away, reactivate them one-by-one to find the culprit causing the conflict.

Let me know how it goes.

Hello Kathryn

Thanks a bunch for your reply.
I have fiddled around with your suggestions (removed the minor CSS changes and functions I had added + disabled all plugins …) but got no effect at all on the result!
In a desperate attempt, and noticing that no social links were declared on the demo site (https://singldemo.wordpress.com/), I also removed the social links on humbolt.fr => that did the trick! ??

So, there does seem to be a bug with the theme, mobile version.
Do you agree with my observation? Are you or your team going to be able to provide a fix?

BR
Thibaut

Thanks for letting me know how your testing went.

I just added some social links to my test site but wasn’t able to replicate the issue with the menu toggle disappearing at small screen sizes – it remains present all the time on my test site, as you can see in this screenshot: https://cloudup.com/cZAZObnolQW

I tested both when logged in and logged out.

I don’t see any social links on your site now, did you remove them? Would you mind putting them back so I can have another look?

Thanks for the prompt answer Kathryn.

I just added back one social link (twitter) – please try again.
Just so we understand each other, here is a screenshot:
https://humbolt.fr/Screenshot_mobile.png

The issue is indeed reproduceable on desktop by reducing the width of the browser: as soon as the edge touches the white border, the menu icon vanishes.
I am starting to wonder if there is a problem with the resolution on my phone?
I’ll ask a colleague tomorrow to show me the site on his phone. In the meantime, if you have an idea…

Thibaut

The Singl developer just took a look at this and discovered that the reason things aren’t working as expected is that you’ve removed the footer. The theme relies on some JavaScript to move the social links to the footer at small screen sizes. Since you’re removed the footer, the social links have nowhere to go, and so they are covering up the menu toggle icon.

I suggest putting back the footer to see if that solves it. Let me know how it goes!

One probably stupid question: how do you enable the footer on the theme?

The only way I found is to add widgets… and that does not solve my problem => see for yourself at humbolt.fr

At the bottom of the footer should be some text that says:

Proudly powered by WordPress | Theme: Singl by WordPress.com.

I don’t see that on your site – do you remember removing it?

Have you made any edits to the theme directly? (I only recommend making changes in a child theme so you don’t lose all your tweaks when you update the theme.)

You could try reinstalling a fresh copy of the theme from www.remarpro.com.

OK!
I had actually removed a section of the code the file footer.php, thinking I was only taking out the licensing info (which incidentally, I realize now I am not sure I am authorized to do).

Everything is looking good now! Thanks A LOT for your help Kathryn!

Thibaut

Yay! I’m glad things are working now.

(which incidentally, I realize now I am not sure I am authorized to do).

You are allowed to remove the footer credits, it’s just that the way you did it technically didn’t work correctly. The theme relies on the colophon div being present in the footer to be able to move the social menu there at small screen sizes.

You can remove the credits by adding this to your custom CSS instead:

.site-footer .site-info {
 display: none;
}