Last Updated: October 19, 2021 | 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.
text-shadow: 0 0.015em #101010,0 -0.015em #101010,0.01em 0 #101010,-0.01em 0 #101010;
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;
8 Responses
Doesn’t work in Safari bro
Updated the fix 🙂 Thanks!!!
Wah keren Mas!
Selama ini kalau pake bold emang kendalanya teks yang lain jadi goyang-goyang 😀
Hehehe… Baru nemu kemaren2 saya juga nih hasil googling 😀 diposting aja biar gak lupa…
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!
Glad to hear that Julie 🙂
Hello here’s another solution without text shadow, it’s actual bold on hover 🙂 Includes extra tip how to make it work in WordPress https://learnedia.com/bold-hover-wordpress-menu/
Hop it helps
Thanks!!!