How to Hide Blogger Navbar or Remove It (2026)
The Blogger Navbar is the thin bar with a search box, “Follow” and “Next blog” links that appears at the top of many blogspot blogs. It rarely matches a custom design. We first wrote about how to hide Blogger navbar in 2006, when it could only be officially turned off for FTP-published blogs. Here’s how to hide or remove it in Blogger in 2026.
Quick answer: In Blogger, go to Theme, click the arrow next to Customize and choose Edit HTML, then add #navbar, #navbar-iframe, .navbar { display: none !important; } to your CSS and save. Or add the same CSS in Theme > Customize > Advanced > Add CSS. Many newer Blogger themes don’t show the Navbar at all, so check before you edit.
Table of Contents
What the Blogger Navbar does
- Shows a search box for your blog.
- Lets signed-in readers follow your blog or report abuse.
- Shows a “Next blog” link that sends readers to a random Blogger blog.
- Gives you, the owner, quick links to New post, Design and Sign out.
The random “Next blog” link and the generic look are why most bloggers want it gone.
How to hide Blogger navbar with CSS
- Sign in to Blogger and choose your blog.
- Open Theme and back up your theme first (arrow next to Customize > Backup).
- Click the arrow next to Customize and choose Edit HTML.
- Find the
]]></b:skin>line and paste the CSS below just above it. - Click Save and view your blog.
#navbar, #navbar-iframe, .navbar {
display: none !important;
height: 0 !important;
visibility: hidden !important;
}If there’s an empty gap at the top after hiding it, add body { margin-top: 0 !important; } as well.
Add CSS without editing HTML
If you’d rather not touch the theme code, open Theme > Customize > Advanced, pick Add CSS from the drop-down, paste the same code and save.
Remove the Navbar gadget in Layout
In older and custom themes the Navbar appears as a gadget in Layout. Click its edit (pencil) icon to change its colour style so it blends in better. In some themes the gadget can’t be deleted, which is why the CSS method above is the most reliable way to hide it.
Newer Blogger themes
Blogger’s newer themes, such as Contempo, Soho, Emporio and Notable, don’t show the classic Navbar bar. If you switched to one of them, you may not need to do anything. Third-party templates often hide it in their CSS already.
Is it allowed to hide the Navbar?
In 2006 Blogger only allowed the Navbar to be turned off for blogs published via FTP, and FTP publishing ended in 2010. Hiding the Navbar with CSS is now very common and widely done, but review Blogger’s current terms and content policy if you’re unsure.
FAQ
How do I remove the “Next blog” link on Blogger?
The “Next blog” link is part of the Navbar. Hiding the Navbar with the CSS above removes it.
Will hiding the Navbar affect my blog’s SEO?
No. The Navbar is loaded separately and doesn’t help your search rankings.
How do I get the Blogger Navbar back?
Delete the CSS you added, or restore your theme backup.
Get our free weekly email: new tech guides and tools, no spam.
New and updated tech guides, a free tool worth bookmarking and one useful pick, once a week. No spam, unsubscribe anytime.
One email a week. Unsubscribe anytime. See our privacy policy.
I have been searching for this long time and finally got it here. it really works.thanks
Thanks for the tips.
Works like a charm =)
I use the code below
#navbar-iframe {display: none !important;
}
Here’s some CSS to remove all the blogger-ish links on the left, leaving only the ones on the right which are useful to you as the blog author:
#b-navbar #b-navbar-logo, #b-query-box, #b-follow-this, #b-share-this, #b-flag-this {display: none;}And here’s some code for making the bar background and border disappear, so it’s just those links:
#b-navbar #b-navbar-bg {display: none;}Now if anyone has any ideas on restyling that navbar with CSS, just to remove the bottom border, that’d be great. Here’s what I’ve been trying:
div#navbar div#b-navbar {border-bottom: 0px none #FFF;
}
I can’t seem to get the selector to take at all… I tried using all sorts of variations like #b-navbar…
Looks like the options for modifying the Navbar have disappeared completely, can’t find any up-to-date explanation in Google’s own help files.
thanks~ it’s hidden already!
#navbar-iframe {height: 0px;
visibility: hidden;
display: none;
}
hiding NV is simple..
#navbar {display:none
};
Hello! Is there a way to change the background color on the navbar, to any color you’d like?
I used this code:
#navbar-iframe {display: none !important;
}
…and works properly. Thanks.
i think it is simple to hide navigation bar but i suggest do’nt hide it,it help in navigation also to visit.
by the…
]]>Find out above code and write above the following code..
#navbar{display:none}.And enjoy your beutiful blog.
find below code.
]]></b:skin>write above this code.
#navbar{display:none}sorry in above comment full code had not appeared..
You guys who leave a code, on the comments, you’re so nice. Thanks.
And the post is amazing, best ever and you care to updated it yet.
Thanks a lot, the last tip works great.
#navbar-iframe {display: none !important;
}
#navbar-iframe {height: 0px;
visibility: hidden;
display: none;
}
it hid my navbar alright… but instead, now i see the
words
#navbar-iframe { height: 0px; visibility: hidden; display: none;instead :(
That text has to go in the CSS and remember to close the brackets.
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
This one is ok!
great tip!
works for me – I’ve incorporated my blog into my company website using an iframe to drop it in below the main top section & nav for the site, thereby maintaining the overall look & feel of the site – the nav bar would ruin the effect, so it’s great that this tip works!
This will move it to the bottom:
#navbar-iframe {position: fixed;
right: 0px;
bottom: 0px;
left: 0px;
}
is removing the navbar against the terms of blogger? not sure about that, though. to be safe, does anyone know how to make the navbar’s background transparent? at least if we can’t remove it, we can still make it more appealing with our layouts.
Before the
Body {just add
#navbar-iframe {display: none !important;}#navbar-iframe {worked for me. i tried
#b-navbar {but it didn’t work.
#navbar-iframe {height: 0px;
visibility: hidden;
display: none;
}
#navbar-iframe {height: 0px;
visibility: hidden;
display: none;
}
THIS WORKS!!! Thanks!!!!!!
I checked the blogspot page and found you only need to disable the navbar div in css style.
e.g. this code could hide the navbar too.
#navbar{height: 0px;
visibility: hidden;
display: none;
}
I tried everything but nothing works!
Please help me!
Just add the below at template header. I work for me in new Blogger as well (both Firefox 2 and IE 7)
#navbar-iframe {height: 0px;
visibility: hidden;
display: none;
}
all do not work in new blogger
This sounds very helpful.
Can I find some more details about it in Blogger Terms of Use?
I don’t have an option to turn off the navbar in templates, probably because I don’t upload via FTP.
I have tried some of the above tips and they aren’t working for me, I’m not sure what I’m doing wrong. When I try to adjust the margins, I get pieces of my template code between the navbar and my title jpg. The blog also looks worse in IE than Firefox.
Alternatively, just select Off in the Change the Blogger NavBar drop down – located on the template section of your blogger settings pages. Its a lot less faff! :)