Question

I have a horizontal navigation bar that when one of the links are selected the link then becomes bold. However, when I click on one, the item to the right of it move position because the font gets larger thus making the width of the list item larger. Is there anyway to avoid this? I would like the text to stay in the same place. Thank you.

Answer 1

Two possible solutions:

Set a width on the a elements and make them inline-block.

​a {
    width: 100px;
    display: inline-block;
}

You just have to make sure the width is wide enough allow the bolded text to show without breaking to two lines.

Second option: use a text shadow to make it look bold.

a.bolded {
    text-shadow:0px 0px 1px black;
}

Here’s a demo showing both. I have the second one on hover but you can add or remove the class using jQuery’s .toggleClass()