How To Go Freelance

Freelance Job Advice and Work Tips for Freelance Writers, Designers and Consultants

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.

3 Comments

  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!

Leave a Reply

© 2014 How To Go Freelance

Copyright Ben Matthews 2014Up ↑