Flexbox navigation issue

Fajer39
Fajer39 used Ask the Experts™
on
Hello experts,

I have a problem with a flexbox applied to navigation items. Whenever I try to hover some of them (hover effect is bold on anchors), it moves all the navigation items a bit because an anchor tag grows about 2px, which is caused by that bold effect.

How to fixed that? Besides setting some core width to all anchors.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
Web Developer/Designer
Commented:
Your options as I see them:

You don't have to set a width on all anchors, you could set a max-width on the container.
You can change the font in non-bold ways. You could add a dark text shadow instead, or make the font a darker color.
You can change the letter spacing to offset the extra space taken by the bolding.
Use javascript to set the width of the item or container when it's not bolded, and then bold it.
Fajer39

Author

Commented:
1. and 3. didn't work, I don't know why
2. unfortunately not an option- client's wish...
4. how would you do that without jquery? Project use react.js + flux.
Fajer39

Author

Commented:
ad 4. jquery can be used but I would be better to handle this problem without JS,

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial