Saturday, October 30, 2010

Changing The Blogspot Navbar's Position

To adjust the navbar, one can manipulate the margin properties to change where the bar appears.

For example. My CSS reads:

#Navbar1 {
margin: 0 0 0 315px;
padding: 0;

The margin property is ordered as Top(0), Right(0), Bottom(0), Left(315). This moves my navbar 315 pixels right. Remember, these values represent Z
pixels [from the] X direction; so "0 0 0 315px" actually puts a margin on the left spanning 315 pixels and moves the target object right. The problem with the left and right movements is they are based on your browser adjustments, not your blog's body (this is all probably defined somewhere else). Therefor I messed up my original movements. However, one can still move the navbar up and down using this property. Some experimenting really helps.


1GN15 said...

Heh, I actually like the standard navbar. By the way, is it me or the one on your blog is a little messed up? Like, you moved it too much to the right.

Squirlmaster said...

Thanks 1GN15, nice catch. I'm still learning HTML, so my navbar wasn't being position relative to the blog's body, but the browser window. This meant it would appear wrong if you had your window size set to anything different than mine. I fixed the post to reflect my limited knowledge lol and changed the HTML back for now.

MTL beer said...

Pretty useful. I'll keep that in mind if i want to change mine.

-Mike said...

thanks for the info, always good to know how to customize the default nav bar

Anonymous said...

thanks for the tip, i might implement something like this on my blog. id like the navbar to be smaller