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_container,
#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.

13 Responses to “How to remove HelloBar on mobile devices on WordPress using CSS”

  1. Andrew says:

    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. Geoff says:

    Perfect Ben, thanks :-)

  3. Stacy Konkiel says:

    Thanks so much for this, Ben! Super easy to implement and–most importantly–it worked perfectly. :)

  4. How to remove HelloBar on mobile devices on WordPress using CSS http://t.co/cAvQeDp2AO

  5. wickedspatula says:

    Works perfectly, thanks!!

  6. K says:

    Hi Ben – thanks for the post! Do you happen to know how to remove Viper Bar for mobile?

  7. Amy Latta says:

    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!

  8. The code for some reason does not seem to be working for me? I tried in both location like you mentioned. Has the Hello bar changed? Thanks!

    • Hi Todd, yes – HelloBar have updated their code. I’ll figure out an alternative way to do this and update the post with the new answer. Thanks!

      • Hello Ben says:

        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.

Leave a Reply