Support » Plugin: Easy Notification Bar » Menu button not visible on mobile

  • Resolved mwinterm

    (@mwinterm)


    Hello,

    Thanks very much for this fantastic plugin, just what I was looking for.

    It works fine for me with the exception of mobile. When viewed on mobile, the notification bar is displayed over the name of the website and the menu button. I am using Chaplin theme, but also tried it with Twenty Twenty-One and the result is the same.

    Any ideas why it could be like that?

    Many thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author wpexplorer

    (@wpexplorer)

    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

    Thread Starter mwinterm

    (@mwinterm)

    Hi AJ,

    Thanks for your quick reply.

    The URL is https://cotswoldcostumes.com

    The header on the website is not sticky, nor is the notification bar itself. I tried it on two different iPhones, in Chrome and Safari (all updated to the latest version), and the result is still the same unfortunately.

    Thanks very much for looking into it!

    Plugin Author wpexplorer

    (@wpexplorer)

    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

    Thread Starter mwinterm

    (@mwinterm)

    Hi AJ,

    Thank you for looking into it, it all makes sense. I’ll try to get in touch with the theme author.

    Thanks again!

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.