Menu text moves on hover

Question

When I hover over the text, the text moves. The reason that the text is moving is that I remove the bold effect on hover. How to stop the text to move on hover?

#menu li a{
    color:#595959;
    font-size:14px;
    font-weight:bold;
    position: relative; 
    overflow:hidden;
    padding:2px 5px;
}

#menu li a:hover{
    color:#FFFFFF;  
    font-weight:normal;
    background-color:#e11d3b;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    text-decoration:none;   
}

can you post the html and _all_ the css for your navigation bar? — samrap, Jul 30 '13 at 07:11
Monospace font? http://jsfiddle.net/Y3Pwa/1/ (actually, the text still jiggles in Firefox). Have a talk with your designer. Convince him/her that bold text is nicer. — Kobi, Jul 30 '13 at 07:24

score 1 · Answer 1 · answered Jul 30 '13 at 07:13

1

It seems that the only way you can avoid this is setting the width fixed. (of each li element)

If not, the bold will always move your text..

answered Jul 30 '13 at 07:13

Lan

709
1
8
16

score 0 · Answer 2 · answered Jul 30 '13 at 07:19

Well, by being shorter without bold, it's mathematic that the text will appear to move, since it does not have the same size anymore... by doing something like that:

#menu li a{
    color:#595959;
    font-size:14px;
    font-weight:bold;
    position: relative; 
    overflow:hidden;
    padding:2px 5px;
    font-size: 25px;
    display: block;
    width: 180px;
    text-align:center;
}

#menu li a:hover{
    color:#FFFFFF;  
    font-weight:normal;
    background-color:#e11d3b;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

You set a width to the link, as well as a display type block (so it will behave like a div for instance). This way, you can add a text-align: center; that will minimize the impression the text has moved.

for the font-size, it was just to improve the size of the text to make the problem more clear. — Johan LAJILI lajili.com, Jul 30 '13 at 10:15

score 0 · Answer 3 · answered Jul 30 '13 at 07:19

0

add this to your css #menu li a:hover{padding:2px 5px 2px 6px;}

Demo

answered Jul 30 '13 at 07:19

Abdul Malik

2,632
1
18
31

Menu text moves on hover

3 Answers3