How to fix navigation buttons in Blue Jeans Blogger Template or "My navigation links are getting wrapped to the next line"

This is mostly a Firefox issue, as it is said that in Internet Explorer it is displayed properly.

Still, I use Firefox and Konqueror, and this broken navigation was annoying me.

To fix it, you need to set font to a fixed size and tweak navigation items margins a little bit.
Here's a step-by-step guide:

1. Open your template code (see in previous sections how to do it)
2. Find a line that starts with .navigation {position:relative;

3. Insert font-size:12px; between .navigation { and position:relative;
4. Scroll down to a line
   .navigation span.prev {width:100px; float:left; margin-left: 45px; }
   and change it to
   .navigation span.prev {width:100px; float:left; margin-left: 38px; }
   
5. Scroll down to a line
   .navigation span.next {width:100px; float:right; margin-right: 45px; }
   and change it to
   .navigation span.next {width:100px; float:right; margin-right: 42px; }

So the template code should look like this (blue color marks modified spots):


Save the template.
Your resulting navigation buttons will look like this:

Navigate this thread:
Next: How to fix the unnumbered list in Blogger Blue Jeans Template or "unnumbered list bullets overlap with item's text"
Previous: How to make Quick Edit pencil icon appear in Blogger Jeans Template (or I don't see my Quick Edit icon in Blogger Jeans Template)
Index: Integrating Blue Jeans Wordpress template on Blogger.

0 said thank you for this page

Liked this article? Bookmark/share it with others: Digg It del.icio.us StumbleUpon Other Email this

Didn't like the article, found a mistake or just want to express your own opinion? Post a comment!