Inline elements shifting when made bold on hover

Question

I created a horizontal menu using a HTML lists and CSS  Everything works as it should except when you hover over the links  You see  I created a bold hover state for the links  and now the menu links shift because of the bold size difference   I encounter the same problem as this SitePoint post  However  the post does not have proper solution  I ve searched everywhere for a solution and can t find one  Surely I can t be the only one trying to do this   Does anyone have any ideas   P S  I don t know the width of the text in menu items so I cannot just set the width of the li items    x000D   x000D   nav   margin  0  padding  0    x000D   nav li    x000D      list-style  none   x000D      display  inline   x000D      border-left   ffffff 1px solid   x000D    x000D   nav li a link   nav li a visited    x000D      text-decoration  none   x000D      color   000   x000D      margin-left  8px   x000D      margin-right  5px   x000D    x000D   nav li a hover   x000D      text-decoration  none   x000D      font-weight  bold   x000D    x000D   nav li first   border  none    x000D   lt ul class  nav  gt  x000D       lt li class  first  gt  lt a href     gt item 0 lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt item 1 lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt item 2 lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt item 3 lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt item 4 lt  a gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

I ve combined a bunch of the techniques above to provide something that doesn t totally suck with js turned off and is even better with a bit of jQuery  Now that browsers support for subpixel letter-spacing is improving  it s really nice to use it    x000D   x000D  jQuery document  ready function      x000D        nav a   each function    x000D          this  clone   addClass  hoverclone   fadeTo 0 0  insertAfter   this    x000D      var regular     this   x000D      var hoverclone     this  next   hoverclone    x000D      regular parent   not   current page item   hover function    x000D        regular filter   not  animated    fadeTo 200 0   x000D        hoverclone fadeTo 150 1   x000D         function    x000D        regular fadeTo 150 1   x000D        hoverclone filter   not  animated    fadeTo 250 0   x000D          x000D        x000D      x000D  ul   x000D    font normal 20px Arial  x000D    text-align  center  x000D    x000D  li  a   x000D    display inline-block  x000D    text-align center  x000D    x000D  a   x000D    padding 4px 8px  x000D    text-decoration none  x000D    color   555  x000D    x000D   x000D   nav a   x000D    letter-spacing  0 53px     adjust this value per font    x000D    x000D   nav  current page item a  x000D   nav a hover   x000D    font-weight  bold  x000D    letter-spacing  0px  x000D    x000D   nav li   x000D    position  relative  x000D    x000D   nav a hoverclone   x000D    position  absolute  x000D    top 0  x000D    left  0  x000D    white-space  nowrap  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt ul class  nav  gt  x000D     lt li gt  lt a href     gt Item 1 lt  a gt  lt  li gt  x000D     lt li gt  lt a href     gt Item 2 lt  a gt  lt  li gt  x000D     lt li class  current page item  gt  lt a  href     gt Item 3 lt  a gt  lt  li gt  x000D     lt li gt  lt a href     gt Item 4 lt  a gt  lt  li gt  x000D     lt li gt  lt a href     gt Item 5 lt  a gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

I use text-shadow solution as some others mentioned here   text-shadow  0 0 0 01px    the difference is that I do not specify shadow color  so this solution is universal for all font colors

User · Answer

CSS3 Solution - Experimental  Fake boldness   Thought to share a different solution which no one suggested here  There s a property called text-stroke which will be handy for this    x000D   x000D  p span hover   x000D    -webkit-text-stroke  1px black  x000D    x000D   lt p gt Some stuff   lt span gt hover this  lt  span gt  it s cool lt  p gt  x000D   x000D   x000D    Here  I am targeting the text inside of the span tag and we stroke it by a pixel with black which will simulate bold style for that particular text   Note that this property is not widely supported  as of now  while writing this answer   only Chrome and Firefox seems to support this  For more information on browser support for text-stroke  you can refer to CanIUse     Just for sharing some extra stuff  you can use -webkit-text-stroke-width  1px  if you are not looking to set a color for your stroke

User · Answer

You can work with the  margin  property   li a     margin  0px 5px 0px 5px     li a hover     margin  0    font-weight  bold      Just make sure that the left and right margin are big enough so the extra space can contain the bold text  For long words  you might choose different margins  It s just another workaround but doing the job for me

User · Answer

This is the solution I prefer  It requires a bit of JS but you don t need your title property to be the exact same and your CSS can remain very simple    x000D   x000D     ul a   each function     x000D      this  css   x000D       padding-left   0  x000D       padding-right   0  x000D       width     this  outerWidth   x000D        x000D      x000D  li  a   display  inline-block    x000D  a   x000D    padding-left  10px  x000D    padding-right  10px  x000D    text-align  center     optional  smoother    x000D    x000D  a hover   font-weight  bold    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt ul gt  x000D     lt li gt  lt a href     gt item 1 lt  a gt  lt  li gt  x000D     lt li gt  lt a href     gt item 2 lt  a gt  lt  li gt  x000D     lt li gt  lt a href     gt item 3 lt  a gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

If you re not averse to using Javascript  you can set the proper width once the page is shown  Here s how I did it  using Prototype        ul nav li   each this setProperWidth    setProperWidth  function li         Prototype s getWidth   includes padding  so we       have to subtract that when we set the width    var paddingLeft   li getStyle  padding-left          paddingRight   li getStyle  padding-right          Cut out the  px  at the end of each padding   paddingLeft   paddingLeft substring 0 paddingLeft length-2     paddingRight   paddingRight substring 0 paddingRight length-2         Make the li bold  set the width  then unbold it   li setStyle   fontWeight   bold        li setStyle   width   li getWidth   - paddingLeft - paddingRight     px       li setStyle   fontWeight   normal   textAlign   center

User · Answer

What about this  A javascript - CSS3 free solution   http   jsfiddle net u1aks77x 1   ul   li float left  list-style-type none    a position relative  padding-right  10px  text-decoration none   a  gt   l1   a hover  gt   l1 visibility hidden   a hover  gt   l2 display inline   a  gt   l2 position  absolute  left 0  font-weight bold  display none     lt ul gt     lt li gt  lt a href     title  Home  gt  lt span class  l1  gt Home lt  span gt  lt span class  l2  gt Home lt  span gt  lt  a gt  lt  li gt     lt li gt  lt a href     title  Contact  gt  lt span class  l1  gt Contact lt  span gt  lt span class  l2  gt Contact lt  span gt  lt  a gt  lt  li gt     lt li gt  lt a href     title  Sitemap  gt  lt span class  l1  gt Sitemap lt  span gt  lt span class  l2  gt Sitemap lt  span gt  lt  a gt  lt  li gt   lt  ul gt

User · Answer

I would advice against switching fonts     on hover  In this case it s just the menu items moving a bit  but I ve seen cases where the complete paragraph gets reformatted because the widening causes an extra word wrap  You don t want to see this happen when the only thing you do is move the cursor  if you don t do anything the page layout should not change   The shift can also happen when switching between normal and italic  I would try changing colors  or toggle underline if you have room below the text   underlining should stay clear from the bottom border   I would be boo d if I used switching fonts for my Form Design class  -        The word font is often misused   Verdana  is a typeface   Verdana normal  and  Verdana bold  are different fonts of the same typeface

User · Answer

I really can t stand it when someone tells you not to do something that way when there s a simple solution to the problem  I m not sure about li elements  but I just fixed the same issue  I have a menu consisting of div tags    Just set the div tag to be  display  inline-block   Inline so they sit next to each other and block to that you can set a width  Just set the width wide enough to accomodate for the bolded text and have the text center aligned    Note  It seems to be stripping out my html  below   but each menu item had a div tag wrapped around it with the corrasponding ID and the class name SearchBar Cateogory  ie   lt div id  ROS SearchSermons  class  SearchBar Category  gt   HTML  I had anchor tags wrapped around each menu item  but i wasn t able to submit them as a new user    lt div id  ROS SearchSermons  class  SearchBar Cateogry bold  gt Sermons lt  div gt    lt div id  ROS SearchIllustrations  class  SearchBar Cateogry  gt Illustrations lt  div gt    lt div id  ROS SearchVideos  class  SearchBar Cateogry  gt Videos lt  div gt    lt div id  ROS SearchPowerPoints  class  SearchBar Cateogry  gt PowerPoints lt  div gt    lt div id  ROS SearchScripture  class  SearchBar Cateogry  gt Scripture lt  div gt     CSS    ROS SearchSermons   width  75px     ROS SearchIllustrations   width  90px     ROS SearchVideos   width  55px     ROS SearchPowerPoints   width  90px     ROS SearchScripture   width  70px      SearchBar Cateogry       display  inline-block      text-align center

User · Answer

x000D   x000D  li   x000D      display  inline-block  x000D      font-size  0  x000D    x000D  li a   x000D      display inline-block  x000D      text-align center  x000D      font  normal 16px Arial  x000D      text-transform  uppercase  x000D    x000D  a hover   x000D      font-weight bold  x000D    x000D  a  before   x000D      display  block  x000D      content  attr title   x000D      font-weight  bold  x000D      height  0  x000D      overflow  hidden  x000D      visibility  hidden  x000D    x000D   lt ul gt  x000D       lt li gt  lt a href     title  height  gt height lt  a gt  lt  li gt  x000D       lt li gt  lt a href     title  icon  gt icon lt  a gt  lt  li gt  x000D       lt li gt  lt a href     title  left  gt left lt  a gt  lt  li gt  x000D       lt li gt  lt a href     title  letter-spacing  gt letter-spacing lt  a gt  lt  li gt  x000D       lt li gt  lt a href     title  line-height  gt line-height lt  a gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Check the working example on JSfiddle  The idea is to reserve space for bolded  or any  hover state styles  content in  before pseudo element and using title tag as a source for content

User · Answer

I like to use text-shadow instead  Especially because you can use transitions to animate text-shadow   All you really need is   a     transition  text-shadow 1s    a hover     text-shadow  1px 0 black      For a complete navigation check out this jsfiddle  https   jsfiddle net 831r3yrb   Browser support and more info on text-shadow  http   www w3schools com cssref css3 pr text-shadow asp

User · Answer

If you cannot set the width  then that means the width will change as the text gets bold  There is no way to avoid this  except by compromises such as modifying the padding margins for each state

User · Answer

try this     nav     font-family  monospace

User · Answer

You could use somehting like    lt ul gt      lt li gt  lt a href     gt Some text lt span gt  lt br   gt Some text lt  span gt  lt  a gt  lt  li gt   lt  ul gt    and then in your css just set the span content bold and hide it with visibility  hidden  so that it keeps its dimensions  Then you can adjust margins of the following elements to make it fit properly   I am not sure if this approach is SEO friendly though

User · Answer

You can try the negative margins too if the bold text is wider than the regular   not always  So the idea is to use classes instead to style the  hover state   jQuery        nav-main  navbar-collapse  gt  ul  gt  li  gt  a   hover function         var originalWidth     this  outerWidth           this  parent   addClass  hover          this  css           margin-left   -    this  outerWidth   - originalWidth    2           margin-right   -    this  outerWidth   - originalWidth    2               function           this  removeAttr  style          this  parent   removeClass  hover           CSS   ul  gt  li  gt  a       font-style  normal     ul  gt  li  gt  a hover       font-style  bold      I hope I could help

User · Answer

An alternative approach would be to  emulate  bold text via text-shadow  This has the bonus   malus  depending on your case  to work also on font icons      nav li a hover         text-decoration  none        text-shadow  0 0 1px      bold            Kinda hacky  although it saves you from duplicating text  which is useful if it is a lot  as it was in my case

User · Answer

One line in jquery      ul nav li a   each function          this  parent   width   this  width     4         edit  While this can bring about the solution  one should mention that it does not work in conjunction with the code in the original post   display inline  has to be replaced with floating-parameters for a width-setting to be effective and that horizontal menu to work as intended

User · Answer

x000D   x000D  ul   x000D    list-style-marker  none  x000D    padding  0  x000D    x000D   x000D  li   x000D    display  inline-block  x000D    x000D   x000D  li   li   x000D    margin-left  1em  x000D    x000D   x000D  a   x000D    display  block  x000D    position  relative  x000D    text-align  center  x000D    x000D   x000D  a before  a after   x000D    content  attr aria-label   x000D    text-decoration  inherit  x000D    x000D   x000D  a before   x000D    font-weight  bold  x000D    visibility  hidden  x000D    x000D   x000D  a after   x000D    position  absolute  x000D    left  0  x000D    top  0  x000D    right  0  x000D    bottom  0  x000D    x000D   x000D  a hover before   x000D    visibility  visible  x000D    x000D   x000D  a hover after   x000D    display  none  x000D    x000D   lt ul gt  x000D     lt li gt  x000D       lt a href    aria-label  Long-long-long  gt  lt  a gt  x000D     lt  li gt  lt li gt  x000D       lt a href    aria-label  or  gt  lt  a gt  x000D     lt  li gt  lt li gt  x000D       lt a href    aria-label  Short  gt  lt  a gt  x000D     lt  li gt  lt li gt  x000D       lt a href    aria-label  Links  gt  lt  a gt  x000D     lt  li gt  lt li gt  x000D       lt a href    aria-label  Here  gt  lt  a gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

A compromised solution is to fake bold with text-shadow  e g      text-shadow  0 0 0 01px black    For better comparison I created these examples     x000D   x000D  a  li   x000D    color  black  x000D    text-decoration  none  x000D    font  18px sans-serif  x000D    letter-spacing  0 03em  x000D    x000D  li   x000D    display  inline-block  x000D    margin-right  20px  x000D    color  gray  x000D    font-size  0 7em  x000D    x000D   bold-x1 a hover hover  x000D   bold-x1 a not  hover    x000D    text-shadow  0 0  01px black  x000D    x000D   bold-x2 a hover hover  x000D   bold-x2 a not  hover   x000D    text-shadow  0 0  01px black  0 0  01px black  x000D    x000D   bold-x3 a hover hover  x000D   bold-x3 a not  hover   x000D    text-shadow  0 0  01px black  0 0  01px black  0 0  01px black  x000D    x000D   bold-native a hover hover  x000D   bold-native a not  hover   x000D    font-weight  bold  x000D    x000D   x000D   bold-native li nth-child 4   x000D   bold-native li nth-child 5   x000D   margin-left  -6px  x000D   letter-spacing  0 01em  x000D    x000D   lt ul class  bold-x1  gt  x000D     lt li gt  lt a class  hover  href     gt Home lt  a gt  lt  li gt  x000D     lt li gt  lt a class  hover  href     gt Products lt  a gt  lt  li gt  x000D     lt li gt  lt a href     gt Contact lt  a gt  lt  li gt  x000D     lt li gt  lt a href     gt About lt  a gt  lt  li gt  x000D     lt li gt Bold  text-shadow x1  lt  li gt  x000D   lt  ul gt  x000D   lt ul class  bold-x2  gt  x000D     lt li gt  lt a class  hover  href     gt Home lt  a gt  lt  li gt  x000D     lt li gt  lt a class  hover  href     gt Products lt  a gt  lt  li gt  x000D     lt li gt  lt a href     gt Contact lt  a gt  lt  li gt  x000D     lt li gt  lt a href     gt About lt  a gt  lt  li gt  x000D     lt li gt Extra Bold  text-shadow x2  lt  li gt  x000D   lt  ul gt  x000D   lt ul class  bold-native  gt  x000D     lt li gt  lt a class  hover  href     gt Home lt  a gt  lt  li gt  x000D     lt li gt  lt a class  hover  href     gt Products lt  a gt  lt  li gt  x000D     lt li gt  lt a href     gt Contact lt  a gt  lt  li gt  x000D     lt li gt  lt a href     gt About lt  a gt  lt  li gt  x000D     lt li gt Bold  native  lt  li gt  x000D   lt  ul gt  x000D   lt ul class  bold-x3  gt  x000D     lt li gt  lt a class  hover  href     gt Home lt  a gt  lt  li gt  x000D     lt li gt  lt a class  hover  href     gt Products lt  a gt  lt  li gt  x000D     lt li gt  lt a href     gt Contact lt  a gt  lt  li gt  x000D     lt li gt  lt a href     gt About lt  a gt  lt  li gt  x000D     lt li gt Black  text-shadow x3  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Passing to text-shadow really low value for blur-radius will make the blurring effect not so apparent   In general the more your repeat text-shadow the bolder your text will get but in the same time loosing original shape of the letters   I should warn you that setting the blur-radius to fractions is not going to render the same in all browsers  Safari for example need bigger values to render it the same way Chrome will do

User · Answer

I just solved the problem with the  shadow  solution  It seems the most simple and effective   nav mainMenu ul li  gt  a hover  nav mainMenu ul li active  gt  a       text-shadow 0 0 1px white      No need to repeat the shadow three times  result was the same for me

User · Answer

I fixed menu when hover bold success  It support responsive  this is my code    function        use strict      document  ready function          customWidthMenu          window  resize function          customWidthMenu        function customWidthMenu            ul nav li a   each function               this  removeAttr  style            var this     this           var width   this innerWidth            this css   width   width   12                jQuery

User · Answer

Not very elegant solution  but  works    a       color   fff     a hover       text-shadow  -1px 0  fff  0 1px  fff  1px 0  fff  0 -1px  fff

User · Answer

I had a problem similar to yours  I wanted my links to get bold when you hover over them but not only in the menu but also in the text  As you cen guess it would be a real chore figuring out all the different widths  The solution is pretty simple   Create a box that contains the link text in bold but coloured like your background and but your real link above it  Here s an example from my page   CSS    hypo   font-weight  bold  color   FFFFE0  position  static  z-index  0     hyper   position  absolute  z-index  1      Of course you need to replace  FFFFE0 by the background colour of your page  The z-indices don t seem to be necessary but I put them anyway  as the  hypo  element will occur after the  hyper  element in the HTML-Code   Now  to put a link on your page  include the following   HTML   You can find foo  lt a href  http   bar com  class  hyper  gt here lt  a gt  lt span class  hypo  gt here lt  span gt    The second  here  will be invisible and hidden below your link  As this is a static box with  your link text in bold  the rest of your text won t shift any longer as it is already shifted before you hover over the link   Hope I was able to help      So long

User · Answer

Another idea is using letter-spacing    x000D   x000D  li  a   display  inline-block    x000D  a   x000D    font-size  14px  x000D    padding-left  10px  x000D    padding-right  10px  x000D    letter-spacing  0 235px x000D    x000D   x000D  a hover  a focus   x000D    font-weight  bold  x000D    letter-spacing  0 x000D    x000D   lt ul gt  x000D     lt li gt  lt a href     gt item 1 lt  a gt  lt  li gt  x000D     lt li gt  lt a href     gt item 2 lt  a gt  lt  li gt  x000D     lt li gt  lt a href     gt item 3 lt  a gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

It s better to use a  before instead a  after like this    x000D   x000D   breadcrumb   x000D    margin  0  x000D    padding  0  x000D    list-style  none  x000D    overflow  hidden  x000D    x000D   x000D   breadcrumb li   x000D   breadcrumb li a   x000D    display  inline-block  x000D    x000D   x000D   breadcrumb li not  last-child   after   x000D    content    gt       or anything else    x000D    display  inline-block  x000D    x000D   x000D   breadcrumb a hover   x000D    font-weight  bold  x000D    x000D   x000D   breadcrumb a  before   x000D    display  block  x000D    content  attr data-label   x000D    font-weight  bold  x000D    height  0  x000D    overflow  hidden  x000D    visibility  hidden  x000D    x000D   lt ul class  breadcrumb  gt  x000D     lt li gt  lt a data-label  one  href  https   www google fr   target   blank  gt one lt  a gt  lt  li gt  x000D     lt li gt  lt a data-label  two  href  https   duckduckgo com   target   blank  gt two lt  a gt  lt  li gt  x000D     lt li gt  lt a data-label  three  href     gt three lt  a gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    For more details  https   jsfiddle net r25foavy

[html] Inline elements shifting when made bold on hover

Examples related to html

Examples related to css

Examples related to hover

Examples related to text-size