How to remove HelloBar on mobile devices on WordPress using CSS

Hello Bar is a popular WordPress plugin that inserts a highly visible notification bar at the top of your website or blog. Combined with a clear call-to-action button or sign up form, it’s a very effective way to direct people to a certain page on your site or get sign ups for your email newsletter.

The Hello Bar is visible on mobile devices as a default, which means it takes up a lot of screen space on smaller mobile phones, such as the iPhone. It would be great if there was a way to remove the bar on smaller devices, but the HelloBar plugin doesn’t make this possible from its settings page.

Here’s how you can remove the Hello Bar when people visit your site from mobiles, but keeps it visible when viewed on desktops, laptops or larger tablets devices.

1. Go to Appearance >> Edit CSS

2. Copy and paste the following code: 

/* Remove hellobar on mobiles ————————————— */

@media only screen and (max-width: 700px) {
#hellobar_pusher { display: none !important; }

3. Click the save button

That’s all there is to it!If that doesn’t work, open up your style.css file (available in Appearance >> Editor) and paste the same code into the bottom of the file, before the final ‘}’.

Now, when you visit your site from a mobile device (or resize your screen to emulate a responsive layout) the HelloBar should disappear.

21 thoughts on “How to remove HelloBar on mobile devices on WordPress using CSS”

  1. Hi Ben, thanks for posting this article. I’ve just spent a but of time trying to work this one out and then found this. Very useful and works perfectly. Thanks for sharing!

  2. This is the first time I ever edited my CSS. Thank you for providing such an easy solution.
    I didn’t have Edit CSS as an option on my appearance tab, so I just added the code to the bottom of the box on the Editor. (Appearance –> Editor).

    Worked Perfectly, thank you!

      • Thanks for a great post. I am in touch with Hello Bar about this issue and so far they’ve been short and unhelpful.

        As is, the bar covers my menu on the mobile version, making it impossible to go to other sections on my site. I have the the push pages down button enabled and I disabled my fix header and the problem persists.

        Hello Bar’s rep simply just said, it’s a styling issue without offering any alternative solutions or ways to disable the mobile version…. Might be time to say Bye Bar.

    • Assuming Ben did not find a solution as he started using an alternative, SumoMe. Hello Bar was rather unhelpful when I reached out.

      Digging the new theme!

  3. This is the new code…

    /* Remove hellobar on mobiles ————————————— */
    @media only screen and (max-width: 700px) {
    #hellobar-bar {
    display: none !important; }

    Works like a charm for me


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.