How To Remove HelloBar From Mobile Only

Using HelloBar?

It’s a very useful tool to put a scroll bar at the top of your site. You can use HelloBar in loads of different ways, depending on what you want to do. You can set it to collect email addresses, like I have. It can even be used to send people to your social media profile, or any kind of URL. It’s entirely up to you! It’s a brilliant feature for collecting emails. I’ve been using it for less than two weeks, and it’s converting at 1.1%. This doesn’t sound a lot, but it’s definitely giving me an increase in email subs!

It Was Breaking My Site

The only trouble was that it was stopping my site from working on mobile devices. And HelloBar don’t give you an option to turn it off just for mobile devices in their settings. This was really frustrating, because I wanted to keep it for desktop, and just remove it for mobile devices. So, I did a bit of research and found a way of removing it myself by editing my CSS.

Uhm Coding? I Don’t Code!

Well there’s no need to panic, because neither do I! This is a super simple fix, and you can do it whether you have knowledge of coding or not. All you need to do is follow these steps and you’ll be able to get it sorted! It’s very simple and the code is written for you, so it’s just a copy and paste deal.

This is the code you’ll need:

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

Make sure to copy it exactly!

Remove HelloBar From Mobile Only

To remove HelloBar from mobile devices, simply go to your customize option on WordPress, and hit Edit CSS. It will take you to your editing screen for customizing your site. Click on the Edit CSS button, and it should give you a typing space to enter your code.

Simply copy and paste the code into your CSS box and hit Save & Publish.

This worked for me, and my site started loading properly straight away on my mobile. If you are still having trouble, you can also copy and paste the code into Customize >> Editor. It will ask you if you’re sure you want to edit this code, because it’s the actual code for your entire website.

Don’t be afraid!

Click Yes, and scroll right to the bottom of the code. Before the final } you must paste the code again. Don’t play about with any other elements of the code!

Click Save and your HelloBar will be removed from mobile devices! But, it will still be there on desktop, which is what we want. Desktop users have no trouble loading the HelloBar, but sometimes it will play havoc with mobile. If it’s been breaking your site, just reload once it’s all saved on WP, and see that your site is loading fine!

I Hope You’ve Found This Useful!

If you’re using HelloBar and it’s been giving you trouble, then this should fix it all for you. Would you would like a full tutorial on setting up HelloBar? Let me know in the comments and I’ll be happy to write one!

If you’re looking for help on getting email subscribers, check out this post on using GetResponse. You can link HelloBar to GetResponse so all emails collected are sent straight to your GetResponse account!