[Resolved] How to make navigation menu font turn bold when you hover

[Tom]

That’s one of the issues with making items bold on hover unfortunately.

If you have a link to an example site which accomplishes this without the jump, feel free to share the link and we’ll see how they did it 🙂

[Ezekiel]

Hello Tom,
I apologize that it took so much time for me to get back to you. A friend of mine gave me this additional code and I was wondering what you think?

.main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a {

padding-left: 25px;
padding-right: 25px;
line-height: 48px;
/*ADD THIS */
min-width: 90px;
text-align: center;
}

It worked for the top menu but the footer menu is still having the same problem. Thank you so much for your honesty and the awesome work you are doing, I really appreciate you all.

Ezekiel.

[Tom]

Ah yea, that works. Basically just making it so every menu item is at least a certain width.

Try this:

.main-navigation .main-nav ul li a, 
.menu-toggle, 
.main-navigation .mobile-bar-items a,
.footer-bar .menu li a {
    min-width: 90px;
    text-align: center;
}

[Ezekiel]

Thank you so much Tom, I replaced it with your code but the footer menu is still having the same problem.

[Tom]

Sorry about that – I just adjusted the CSS above which should fix it 🙂

[Ezekiel]

Hello Tom,
The problem is still there. Thank you for going above and beyond.

[Author]

Posts