Archived topic
How to make navigation menu font turn bold when you hover
20 replies · Started by Ezekiel on October 16, 2017
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 :)
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.
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;
}
Thank you so much Tom, I replaced it with your code but the footer menu is still having the same problem.
Sorry about that - I just adjusted the CSS above which should fix it :)
Hello Tom,
The problem is still there. Thank you for going above and beyond.