Total 2321 characters, estimated reading time: 6 minutes.
Various ways to hide the navigation bar
In blogging platforms, many users want to remove the default navigation bar or make custom changes to it in order to make the page more concise or meet their design needs. Here are a few common ways to hide the navigation bar:
Method 1: Hide navigation bar via CSS
The easiest way to do this is in the CSS file of the blog template, find the body before the tag and then add the following code:
css copy code #navbar-iframe {display:none !important;}
This code will be passed through the display:none to hide the navigation bar, where the !important Ensures that the style is prioritized and prevents other styles from overriding this setting. After applying this code, the navigation bar will no longer be displayed, but the layout of the page will not change and there will be no additional whitespace.
Method 2: Completely hide the navigation bar and remove whitespace
If you wish to not only hide the navigation bar, but also remove the space taken up due to the navigation bar to avoid a blank space at the top of the page, a more comprehensive code can be used:
css copy code #b-navbar.
#navbar.
#Navbar1,
#space-for-ie {height: 0px; visibility: hidden; display: none;}
body #header {margin-top: 0px !important;}
#navbar-iframe {display: none;}
This code does several things:
- pass (a bill or inspection etc)
display: noneCompletely hidden.#b-navbar,#navbar,#Navbar1,#space-for-ieand other possible navigation bar elements. - utilization
visibility: hiddenHide the element while passing theheight: 0pxRemove the height of these elements. body #header {margin-top: 0px !important;}This line of code removes the top margin that may appear due to hiding the navigation bar.
Method 3: Slide to hide the navigation bar
If you prefer a sliding effect to hide the navigation bar, you can use the following code:
css copy code #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
This code utilizes the opacity property sets the transparency of the navigation bar to 0, making it invisible in its initial state. When the user hovers the mouse over the area, the transparency becomes 1, the navigation bar will be displayed. This method can achieve a smooth transition effect, more in line with the needs of modern web design.
Method 4: Completely hide the navigation bar and gaps
If you just want to hide the navigation bar and you don't want it to take up any space, you can add a new section to the body post-labeling #Page Add the following CSS code in front of the tag:
css copy code .Navbar {
visibility: hidden;
display: none;
}
This code hides the .Navbar element, and by means of the display: none Make sure it doesn't take up any space and makes the page cleaner.
Method 5: Hide via JavaScript Script
Another, more flexible approach is to add script code via HTML/JavaScript elements that allows the navigation bar to be hidden via a set or slide effect. Here is a common solution:
- Add an “HTML/JavaScript” element to the template settings.
- Paste the following JavaScript code into this element:
html copy code
// Blogger NavBar settings
BloggerExtOptions.hide_navbar = true; // true = hide navbar
BloggerExtOptions.fade_navbar = true; // true = enable sliding hide effect
</script
This code is passed through the BloggerExtOptions.hide_navbar = true Set up the hidden navigation bar with the BloggerExtOptions.fade_navbar = true Slide hide effect is enabled to allow users to see the animation of the navigation bar when hovering the mouse.
Customized website icons
In addition to hiding the navigation bar, many blog users want to customize their site icons. This can be done by adding custom icon files. Typically, icon files are .ico format icon, you can set it by following the steps below:
- In the blog template's
<head>Add the following HTML code to the section: html copy code<link rel="Shortcut Icon" href="图标地址"> <link rel="Bookmark" href="图标地址"> - commander-in-chief (military)
"Icon address"Replace the URL with the URL of your customized icon. for example, if your icon file is stored in thehttp://example.com/favicon.icoIf the code is not in the right place, then the code should be as follows: html copy code<link rel="Shortcut Icon" href="http://example.com/favicon.ico"> <link rel="Bookmark" href="http://example.com/favicon.ico">
After this is set up, when visiting your website, the browser's tab, address bar or bookmark bar will display the icon you specify instead of the default icon.
summarize
Through these methods, you can hide the navigation bar, adjust the page layout, or customize the icons as needed, making your blog more in line with your personal design needs. Each method has its applicable scenarios, and you can choose the most suitable way to make changes according to the actual needs. Hope these methods can help you better customize and optimize your blog!
Lan Xiaobo (1952-1997), PRC politician Protocol Not Supported The client and server do not support the general SSL protocol version or cipher suite. This error is prompted 
kittyzero Hi, https://www.youtube.com/watch?v=eJUWQqCKfW0 I set it up and the extranet won't go out, not sure why, emailed you, thanks. 
ericjin211 Hi, tried this solution and found that foreign sites going through openclash proxy will not go through adguardhome, what could be the problem 🤔 
666 Tried the copy, no other problems, dns test has Hong Kong and Japan, not sure if it's a leak or not 
Loong2004 Hello, I feel that the program is very good, but the white hand is handicapped, can you have paid remote guidance, thank you! 
Chinese 
English 
Spanish 
French 
German 
Japanese 
Portuguese 
Italian 
Dutch