How to Give Bold on Hover without Shifting another Element

Last Updated: March 28, 2017 | Reading Time: < 1 minute

Usually, if you have a navigation menu with “bold” on hover effect, it will shift another menus. To be clear check out the example below:

See the another elements are slightly shifting as you hover one menu. To solve the issue, we can give static width to the list, but how if we want to keep it dynamic?

Take a look at the sample below:

Yes, I utilize the text-shadow to make the font looks bold, without affecting another elements.

[css]
text-shadow: 0 0.015em #101010,0 -0.015em #101010,0.01em 0 #101010,-0.01em 0 #101010;
[/css]

Let me know if you have any thought or even another solution.

Update on safari:

(29/03/17)
Here’s the working method for Safari and Webkit browsers:

-webkit-text-fill-color: black;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;

 

Show 8 Comments

8 Comments

    • pupungbp

      Updated the fix 🙂 Thanks!!!

  1. Wah keren Mas!
    Selama ini kalau pake bold emang kendalanya teks yang lain jadi goyang-goyang 😀

    • pupungbp

      Hehehe… Baru nemu kemaren2 saya juga nih hasil googling 😀 diposting aja biar gak lupa…

  2. Julie

    Thank you for posting this solution! I tried several other shadow effects, but they all left the text fuzzy. This one makes nice, crisp text. I changed the shadow to white to match my text, and it was perfect!

    • pupungbp

      Glad to hear that Julie 🙂

Any idea? Fill the comment below

This site uses Akismet to reduce spam. Learn how your comment data is processed.