{"id":33949,"date":"2017-09-20T02:20:45","date_gmt":"2017-09-19T20:20:45","guid":{"rendered":"https:\/\/www.usefulblogging.com\/?p=33949"},"modified":"2024-12-01T22:00:15","modified_gmt":"2024-12-01T16:00:15","slug":"hide-remove-navbar-blogger","status":"publish","type":"post","link":"https:\/\/www.usefulblogging.com\/hide-remove-navbar-blogger\/","title":{"rendered":"How to Hide or Remove Navbar in Blogger Website? (With Pictures)"},"content":{"rendered":"\n<p>In this short tutorial I&#8217;m going to share an important things about Blogger.<\/p>\n\n\n\n<p>Most of the blogspot user want to <em>Remove Navbar<\/em> from their blogs. The navigation bar is that bar that appears on top of your blogger\u2019s blog with features like search, next blog, flag blog and the rest of them. It\u2019s got cool features though but many believe it gives their blog some kind of ugly look. I bet you don&#8217;t like too, else you won&#8217;t be reading this tutorial.<span id=\"more-759\"><\/span><span id=\"more-284\"><\/span><\/p>\n\n\n\n<!--more-->\n\n\n\n<p>If you are using Blogger default templates, you notice a navigation bar at the top of your blog. So, this article basically about removing Navbar in Blogger.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Trick 1: Hide or Remove Navbar in Blogger<\/h2>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>If you want to hide or remove Navbar (Navigation Bar) in blogger websites then follow this first way. It&#8217;s really easy and simple.<\/p>\n\n\n\n<p>1. Go to the Layout section.<\/p>\n\n\n\n<p>2. Click on &#8220;Edit&#8221; link of Navbar widget and you should be in the Navbar Configuration window.\u200b<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"552\" height=\"572\" src=\"https:\/\/www.usefulblogging.com\/wp-content\/uploads\/2017\/09\/Remove-Navigation-Bar-in-Blogspot-Sites.png\" alt=\"Remove Navbar\" class=\"wp-image-33951\" srcset=\"https:\/\/www.usefulblogging.com\/wp-content\/uploads\/2017\/09\/Remove-Navigation-Bar-in-Blogspot-Sites.png 552w, https:\/\/www.usefulblogging.com\/wp-content\/uploads\/2017\/09\/Remove-Navigation-Bar-in-Blogspot-Sites-93x96.png 93w\" sizes=\"(max-width: 552px) 100vw, 552px\" \/><\/figure>\n\n\n\n<p>3. Choose &#8220;Off&#8221; and click on &#8220;Save&#8221; button.<\/p>\n\n\n\n<p>4. You&#8217;re done!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Trick 2: Hide or Remove Navbar in Blogger<\/h2>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>This trick will give you a way to remove navigation bar from blogger websites. Just simple use the following CSS.<\/p>\n\n\n\n<p>1. Sign In to Your Blog and Click on Layout<\/p>\n\n\n\n<p>2. Now Click on Edit HTML<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"200\" height=\"40\" src=\"https:\/\/www.usefulblogging.com\/wp-content\/uploads\/2017\/09\/How-to-Hide-or-Remove-Top-Navigation-Bar-1.jpg\" alt=\"\" class=\"wp-image-33950\" srcset=\"https:\/\/www.usefulblogging.com\/wp-content\/uploads\/2017\/09\/How-to-Hide-or-Remove-Top-Navigation-Bar-1.jpg 200w, https:\/\/www.usefulblogging.com\/wp-content\/uploads\/2017\/09\/How-to-Hide-or-Remove-Top-Navigation-Bar-1-96x19.jpg 96w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/figure>\n\n\n\n<p>3. Now paste this code as shown in the image below<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">#navbar {\nheight: 0px;\ndisplay: none !important;\n}<\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"320\" height=\"247\" src=\"https:\/\/www.usefulblogging.com\/wp-content\/uploads\/2017\/09\/How-to-Hide-or-Remove-Top-Navigation-Bar-2.png\" alt=\"\" class=\"wp-image-33952\" srcset=\"https:\/\/www.usefulblogging.com\/wp-content\/uploads\/2017\/09\/How-to-Hide-or-Remove-Top-Navigation-Bar-2.png 320w, https:\/\/www.usefulblogging.com\/wp-content\/uploads\/2017\/09\/How-to-Hide-or-Remove-Top-Navigation-Bar-2-96x74.png 96w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>4. You&#8217;re done!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Final Thoughts<\/h3>\n\n\n\n<p>Now go check your blog and you&#8217;ll find out the Navbar is gone. I hope you&#8217;re enjoyed my tricks about hide or remove Navbar in Blogger. Please share it with others!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this short tutorial I&#8217;m going to share an important things about Blogger. Most of the blogspot user want to &#8230; <a title=\"How to Hide or Remove Navbar in Blogger Website? (With Pictures)\" class=\"read-more\" href=\"https:\/\/www.usefulblogging.com\/hide-remove-navbar-blogger\/\" aria-label=\"Read more about How to Hide or Remove Navbar in Blogger Website? (With Pictures)\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":33954,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1105],"tags":[2352,2354,125],"class_list":["post-33949","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogger","tag-blogger","tag-blogspot","tag-how-to","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33","no-featured-image-padding"],"_links":{"self":[{"href":"https:\/\/www.usefulblogging.com\/wp-json\/wp\/v2\/posts\/33949","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.usefulblogging.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.usefulblogging.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.usefulblogging.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.usefulblogging.com\/wp-json\/wp\/v2\/comments?post=33949"}],"version-history":[{"count":0,"href":"https:\/\/www.usefulblogging.com\/wp-json\/wp\/v2\/posts\/33949\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.usefulblogging.com\/wp-json\/wp\/v2\/media\/33954"}],"wp:attachment":[{"href":"https:\/\/www.usefulblogging.com\/wp-json\/wp\/v2\/media?parent=33949"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.usefulblogging.com\/wp-json\/wp\/v2\/categories?post=33949"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.usefulblogging.com\/wp-json\/wp\/v2\/tags?post=33949"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}