Early Blogger templates often displayed a navigation bar at the top of the page. While this made it convenient to log in and manage the blog, it could also conflict with custom headers, branded navigation, or mobile layouts. Blogger themes from different eras handle this differently, so before hiding it, you should first determine whether you’re using an older template or a newer responsive theme.
Why does the Blogger navigation bar appear?
Older Blogger templates typically include a widget called "Navbar"; newer themes such as Contempo, Soho, and Emporio may no longer display the traditional Navbar. If what you see at the top of the page is actually the theme menu or custom HTML, simply copying and pasting the old code won't work.
Method 1: Disable the Navbar widget in the layout
- Log in to your Blogger dashboard and go to “Layout.”
- Find the Navbar or Navigation Bar widget and open its settings.
- If the interface offers a “Close” option, select it and save the layout.
- Use an incognito window to check both the desktop and mobile versions at the same time.
This is the safest approach because it doesn't modify the theme code and makes it easy to revert the changes. If there are no Navbar items in the layout, consider the CSS solution instead.
Method 2: Hide the Old Navbar Using CSS
Go to “Theme → Customize → Advanced → Add CSS” and add the following rules:
#navbar, #navbar-iframe, .navbar { display: none !important; }
body { margin-top: 0 !important; }Before saving, we recommend downloading a backup from the “Themes” page. If a blank space remains at the top after hiding the header, check to see if the theme has a fixed header margin; do not blindly delete the entire header area.
Method 3: What should you keep in mind when editing HTML?
Editing the theme's HTML is recommended only when neither the layout nor CSS can resolve the issue. Start by searching Navbar、navbar-iframe Or the corresponding widget ID, to confirm that the code belongs to Blogger's system navigation and not the site's own main menu. Save a copy of the theme before deleting anything, and after making changes, check the homepage, post pages, tag pages, and mobile view.
Frequently Asked Questions
Will hiding the navigation bar affect search indexing?
Generally, no. The navigation bar is not part of the main content or structured data, but it should include a clear main site navigation, an "About" page, and contact information.
Why is it still showing on the mobile version?
Older templates may use standalone mobile themes. Please check the mobile preview to confirm that the CSS is loading, or use a responsive theme after disabling the standalone mobile template.
How can I recover?
Simply delete the newly added CSS, re-enable the Navbar widget, or upload the backup of the theme file from before the changes were made.
If you're migrating an old blog to a self-hosted site, you can also read this site's AdSense Payment and Site Management Guide。
Original article by Tech.laowang. If you wish to repost this article, please credit the source: https://techlaowang.com/en/blogger/
