Monday, March 15, 2010

Hiding the nav bar in blogger should be easier

Rick Klau, blogger's product manager, will tell you that it just takes a bit of css to hide the blogger nav bar on your blogger hosted blog. That's true, but aspects are not obvious. Before going into all that below though, here's one css rule, shown in the screenshot, that does it:

#navbar-iframe {visibility:hidden}

That rule hides the contents of the nav bar while leaving its box intact. In other words, there's still a space at the top of the screen where the nav bar would have been even though the nav bar itself is not showing. I like that space, so this is the approach I used.

An alternative is to remove the nav bar and eliminate the space it occupies. The rule that does that is:

#navbar-iframe {display:none}

So, what's the difficulty in this? There are three things:

  • First off, you have to know css, and even if you do, you have to know multiple options.
  • You have to know which element to select. I initially used webkit's "select element" tool to see a DOM based representation of the page, so I could determine which element to target with my css rules. That led to my initial erroneous selection of an element with the ID navbar-b. It was only after I did display source that I figured out what the correct element was.
  • Finally, you have to know where to look to add custom css. If you're using the new blogger template designer it's under the advanced tab at the very bottom with the heading "Add CSS".

Here's what I'd like: The ability in layout to say I don't want the nav bar at all. I'd like to be able to add elements of the nav bar into my blog's side bar. Particularly suspect in the nav bar is the "next blog" link. I'd like it if that could turn into a list of potentially related blogs that I would know about in advance.