Wednesday, 17 March 2010

Fixing the Blogger Navigation Bar

Following my minor rant about the Blogger NavBar and why its such a stylistic and artistic bad idea, here's how I dealt with it.

Most of the Blogger Templates use iframes to load the NavBar, styled with a CSS block ID named navbar-iframe. So we can use standard CSS formatting to move, hide or otherwise layout the NavBar as we wish.
Sign in to Blogger Dashboard, then select Layout.
Under the Layout tab, click on Edit HTML.
Search for the following line of code:
]]>
Above this line, add the following style sheet code:
#navbar-iframe { display: none !important; }
This turns off the embedded page element with maximum browser compatibility.
Select the SAVE TEMPLATE button at the bottom of the edit page to apply the change.

You may need to adjust the spacing in your template if the navigation bar leaves behind a gap. To remove the gap, find the CSS block for page body:
body {
Add the following CSS code into the body tag:
position: relative;
top: -32px;
Select SAVE TEMPLATE button to apply the change. RC

No comments:

Post a Comment

At least try to be nice, it won't kill you...