How to tune one menu item

[Alexander]

Hello,

I set class for two menu items (orange ones) at the secondary menu.

http://leen.consultant.co.ua/
 
Under the mouse text become wider and all items shift. Are there any simple way to prevent moving other items?

Thanks.

[scrambler]

You are the one who did that…

.smitem1 a:hover {font-size:100%;font-weight:bold;letter spacing:1px;}

Your rule changes the letter spacing on hover, so of course it gets bigger…

Remove the letter spacing part and it wont change size 🙂

[Alexander]

I know. But there is the free space nearby. Are there any way to use free space nearby not to influence entire menu?

P.S. I tried to change font-weight but happened nothing.

[Weaver]

I don’t understand what you mean by free space.

But as long as you exiplicitly change the width of the :hover, there will be different widths. Some designers might want that effect – it isn’t necessarily bad in your example – if you want that effect.

[Alexander]

I am sorry. It is offtopic. I understand how menu works. But are there any way to change nor hover width nor only text whithin link.

[scrambler]

The only space you can regain is the left and right padding , but you also need to reduce the letter spacing a bit. the modified rule below works for the first item, but of course not the second one as there are less characters.

.smitem1 a:hover {font-size:100%;font-weight:bold;letter spacing:0.8px;padding-left:0;padding-right:0;}

To compensate on the last item, you can add some padding back with the rule below

#menu-item-2284 a:hover {padding-left:8px;}

[Alexander]

Thank you,

I am going to try several ways to stress the menu’s items.

[Author]

Posts