How to get bold on hover effect in WordPress menu

In this tutorial, I will share with you an awesome trick to create a bold on hover effect on the menu items. I picked it up from JSFiddle but I will expand it so you can use it on WordPress site as well.

The problem – bold on hover moves other menu items around

Recently I have been working on the solution for the client to make menu items bold on hover in WordPress menu. I thought to myself it is going to be a walk in the park. Applying bold when user hovers the menu item looks like a pretty straight forward task.

But it turned out much more complicated than that. Bold text is a bit wider than the normal one so hovering over one item would make surrounding menu items to jump around. I tried playing around with padding to fix it but couldn’t make it work.

The solution

I found this cool trick on JSfiddle through Stack Overflow answer. It is really awesome as it uses just CSS and HTML. The idea is to add title attribute to each of the menu items a tags. But not just any title, it has to be the value of the menu item string. This way we reserve space for bold on hover used with ::after pseudo element.

Use the bold on hover solution in WordPress

You can use that solution in your project, even if it is WordPress based with no problem. In fact I used it on this blog. Go ahead an hover over the menu to see it in action.

So how to do it? You need to add the CSS in your style.css file. Tweak the CSS to better suit your needs. Play around with selectors, properties and values to get what you need.

I used the following CSS:

/*menu bold on hover*/
.main-navigation-menu a:hover{
	font-weight:bold;
}	
.main-navigation-menu a:hover{
	font-weight:bold;
}	
ul.main-navigation-menu {
	font:normal 16px Arial;
}
ul.main-navigation-menu li, a {
	display:inline-block;
	text-align:center;
}
ul.main-navigation-menu a {
	text-decoration:none;
}
ul.main-navigation-menu a:hover {
	font-weight:bold;
}
ul.main-navigation-menu a::after {
	display:block;
	content:attr(title);
	font-weight:bold;
	height:1px;
	color:transparent;
	overflow:hidden;
	visibility:hidden;
}

After CSS is added, you need to add title attribute to menu items. Adding titles to menu anchor tags manually is pretty easy. I will show you how to do it, but that is pretty boring. So I will also show you how to create a WordPress filter that adds titles automatically. It will add exactly what we need for this bold on hover trick to work properly.

How to add titles to menu anchor tags manually in WordPress

To add the titles to a elements in WP menu, you need to enable that option first, then apply changes. This is how you do it, step by step:

1.Go to the Appereance->Menus within WP dashboard.
2.Click on the Screen Options in the top right corner of the screen.
3.Dropdown with options should appear, check the Title Attribute checkbox.

4. After step 3, you should be able to have an option to enter the title attribute when you are editing a menu item.

5. Enter the appropriate title – it has to be exactly the same as the Navigational Label field (in my case, I would put WordPress).

6. After you entered title attributes for all of the menu items, click Save menu button.

How to add titles to menu anchor tags automatically in WordPress using a filter

Adding title attributes to menu items in WordPress as described above should work like a charm, but like I said, that is boring and time-consuming. Also when you add a new menu item in the future, chances are you will forget to add title attribute. To avoid all that, we can use a neat filter to tell WordPress to add title attribute to menu items automatically.

Open up functions.php file in the theme you are using (hopefully you have child theme activated) and paste the following code:

// add title attributes to menu
function learnedia_add_title_attribute($atts, $item){
	
	$atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : $item->title;
	
	return $atts;
}
add_filter('nav_menu_link_attributes', 'learnedia_add_title_attribute', 10, 2);

This code modifies the $atts array by adding a value of $item->title (basically a Navigational Label) to the $atts[‘title’] field if title attribute is not set manually.

Finally, if you added CSS correctly, it should work. Go ahead and try hovering over the menu to see it in action. There is one side effect – we can see title shown in a small box when we hold the hover for a while, but I can live with that 🙂