0

I have a menu which looks like this:

enter image description here

When the user clicks on Recruitment, it goes bold (as it should do) but moves the whole menu 1 or 2px to the left. I am using DNNnav.

SOLDIER-OF-FORTUNE
  • 1,634
  • 5
  • 39
  • 66

2 Answers2

1

Boldness of fonts uses extra space. If you make sure that every menu-point has a set width with for example width: 100px;, it should not jump place when you hover over it, as it will be a steady 100px, no matter what's inside.

Good luck!

P.S. If needed you should of course maker it wider than 100px.

Rvervuurt
  • 8,589
  • 8
  • 39
  • 62
  • Hi thanks for the reply. Its almost as if i need the menu items to be fluid width. How can i do this? – SOLDIER-OF-FORTUNE Mar 28 '12 at 10:22
  • Make the width in percentages (100%) instead of px (100px), but I don't think that will fix the jumping problem. – Rvervuurt Mar 28 '12 at 10:42
  • I looked at it, but the menu items don't go bold when I hover over them. – Rvervuurt Mar 28 '12 at 12:02
  • Thats because its injecting jquery to make it bold on selected. I cant really recreate this as its all done from a CMS – SOLDIER-OF-FORTUNE Mar 28 '12 at 12:06
  • Why are you using Jquery to make it bold when selected? It's so easy with some CSS trickery. http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/ for example – Rvervuurt Mar 28 '12 at 12:46
0

It's hard to go through your coded in jsFiddles. But just try to give a fix width in px for your 'span.txt' span.txt{ width:100px;} or maybe min-width span.txt{ min-width:100px;} may help.

Milindu Sanoj Kumarage
  • 2,714
  • 2
  • 31
  • 54