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.

10 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

  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!

Leave a Reply