Menu button not visible on mobile

Hi,

I actually coded the plugin while using the Twenty 21 theme to ensure it all works but tested again to be safe and I’m not having any issues. Are you perhaps using some sort of mobile plugin or making the header sticky on mobile?

Here is a screenshot of the bar with the Twenty 21 theme: https://a.cl.ly/4gul1PAy

If you can share the URL so I can take a look that would be very helpful.

Additionally if you have enabled the Sticky function for the notification bar, this will only work well in modern browsers, it’s possible if your phone is outdated it may not work. I know for example I have an old iPad that just won’t update to the latest version of Safari and so it has issues with modern CSS like CSS gaps, sticky…etc. You may want to try disabling the sticky option if it’s enabled to test and see if that’s it.

– AJ

Hi,

So what’s happening is that the site header is using some sort of “Overlay Header” functionality available in the theme and so it’s placing the header at the top of the site in an absolute position which would make it render under the notification or anything else at the top of the page. And the reason it renders poorly on mobile is because the CSS used to add padding to the overlay header is only being applied on larger screen sizes.

I recorded a video showing you this using the browser inspector tools: https://a.cl.ly/Z4ujKqwK

You could try adding CSS to the site to offset the notification bar by adding a top padding or margin to the #site-header or .overlay-header element, the problem is that as the window width gets smaller your notification bar will get taller as there is less room for all the content. So the only “good” fix would be to use javascript to re-calculate the offset needed or to disable the Overlay Header functionality. You can try contacting the Chaplin theme developers though to see if they have any alternative solutions as I don’t have any experience with that theme.

Hope this all makes sense!

– AJ