-
Posts
-
Hi
My clients have been very amendment in having some specific menu behaviors, one of them being that the hover and active menu items be bold. This breaks the menus slightly as it has to expand for the 1 or 2 px added space.I tried to use the text-shadow trick but the tiny bit of blur it gives is apparently too much so I have to find alternate solutions.
I have read in many places of there being some tricks around this. The one that looks most promising is this and I would like to know if someone can show me how to implement it:
http://www.designend.net/en/webmaster-blog,jquery-bold-and-hover-on-the-horizontal-items-list
It’s adding a bit of JS code just before end of the WP main menu but I’m not sure.I also read that this works
$('ul.nav li a').each(function(){ $(this).parent().width($(this).width() + 4); });But again, I’m not sure how to implement it.
this my site with the menu in question: http://pclmedia.ca/
Thank you!
this is also where I pulled some info from.
http://stackoverflow.com/questions/556153/inline-elements-shifting-when-made-bold-on-hoverHi,
Looks like you got the hover to work already? Please try this for the active menu item:
.current_page_item .avia-menu-text { font-weight:bold !important; }Best regards,
RikardThank you the for the bit of code and I will implement it right away.
The hover works but it pushes the menu item next to it as it expands due to the extra pixel or two it’s now using. The JS I posted above apparently solves this issue but I have no idea if it works.
When you run the mouse over the whole menu you really notice it.
- You must be logged in to reply to this topic.