CODEWITHSUNDEEP
htmlcsshover
Arthur Rey
Arthur Rey

Reputation: 3058

Movement caused by change of font size on css hover

My menu:

<div id="menu_container">
    <ul>
        <li>Portfolio</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
</div><!--//menu_container-->

My CSS:

#menu_container { text-transform: uppercase; font-size: 1.3em; font-style: bold; font-family: 'Lato', sans-serif; float: left; height: 100%; }
#menu_container ul { list-style-type: none; display: inline-block; vertical-align: middle; }
#menu_container ul li { display: inline-block; margin-left: 20px; text-decoration: none; color: #4e918b; }
#menu_container ul li:hover { font-weight: 900; }

My font is a Google font, hence the font-weight property.

When hovering a li, the other li are slightly moved. I know this question has been asked before, but I didn't find any solution working for my sample.

Here is a JSFiddle to make things easier.

Upvotes: 0

Views: 1181

Answers (2)

Sleek Geek
Sleek Geek

Reputation: 4686

Just adjust the width of the containing elements or reduce the margin-left value as shown below. 

 #menu_container ul li { 
     margin-left: 10px; 
   }

Below are some other solutions to the problem

  1. reducing the font size
  2. increasing the width of the containing element. Thereby being ready for the increase in font size and also stopping the movement. You can adjust the width until there are no movements.
  3. removing or reducing the font weight.

See this example fix. Achieved by reducing margin-left, font-size and font-weight.

Note: It's only normal for the change in font size or font weight to cause a movement because you need room to accommodate the increase in size of the text or else, it will move.

Upvotes: 1

A Steinmetz
A Steinmetz

Reputation: 136

This is happening because the element widths are fluid, and determined by the width of the text, which increases when the font is bold. You could fix the problem by determining the computed widths of the individual elements and setting their widths to that. Something along the lines of this: 

$(document).ready(function(){
  $("#menu_container ul li").each(function(){
    var $this = $(this);
    var width = $this.width();
    $this.css("width", width);
  });
});

http://jsfiddle.net/yvxb1os1/20/

Alternatively, you could use a darker font color in place of bold text.

Upvotes: 0

Related Questions