Saturday, May 31, 2008

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 {width:100px; float:right; margin-right: 45px; }
    and change it to
    .navigation {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.

said thank you for this page

Liked this article? Bookmark/share it with others: Didn't like the article, found a mistake or just want to express your own opinion? Post a comment!


Post a Comment

Have anything to say? Leave a comment!
Too shy or got a too private question? Email me
Alternatively, you can drop me a line on Twitter