How to Get the Navigation Bar on the Side of the Banner in TypePad
By default, most TypePad layouts have the navigation bar below the banner. A few have the navigation bar above the banner. Very few, if any, have a navigation bar next to the banner. However, this is doable in any layout. It requires several basic CSS commands, and some trial and error. However, the process itself is simple – you just might have to play with it a little to get the perfect position.
Other People Are Reading
Instructions
-
-
1
Log into your TypePad account.
-
2
Click “Layout” and then “Custom CSS.”
-
-
3
Add the following chunk of code at the bottom (in CSS, the order doesn’t matter):
#banner {
position:float;
} -
4
Add a second chunk of code below that:
#nav {
position:float;
margin-left:XXX;
} -
5
Change the “XXX” to a large number of pixels and click “Preview.” You might try 100 to start with, for instance. The banner and nav bar are now on the same line -- the two “position:float” commands accomplished that. But you need to move the nav bar over so that they don’t overlap.
-
6
Keep changing the pixels number until you get the position right. A higher number will move it farther over to the right. Every layout is different, so you may have to keep adjusting the number until it looks good.
-
7
Click “Save” when you are finished.
-
1
