How to make navigation menu font turn bold when you hover

Hi there,

Try this CSS:

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.footer-bar .widget_nav_menu .menu-item a:hover,
.footer-bar .widget_nav_menu .current-menu-item a {
    font-weight: 600;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Hello Leo,

I am personally blown away at the awesomeness of you guys, it worked perfectly.

Thank you so much, Leo.

Glad we've been helpful :)

Hello Leo,

Thank you for your help. Please, how can I make the footer menu to be and behave exactly like my Primary menu and also to make the hover transition smother?

I apologize if I am asking for too much, I am quite a novice.

Ezekiel.

Edited the code here: https://generatepress.com/forums/topic/how-to-make-navigation-menu-font-turn-bold-when-you-hover/#post-404219

Give it a shot and let me know :)

Wow! thank you for the quick response, I just tried the edited code and it didn't work, it turned off the hover effect altogether.

it turned off the hover effect for both the Primary menu and the footer menu. I am using a different menu for the Primary and the footer menu if that'll help

Edited the code again. Made a couple mistakes before. Can you try it again?

Just did, but the hover and the current effect are still not working on the footer menu.

almost there

Oops another edit. It should work now :)

Yes!!! it works perfectly!!!
Thank you so much, Leo, you are Heaven sent!

Glad I could help!

Hello Leo,
I need help to make the other menu links 'not move' when you hover over any other menu item and make the transition smoother. This is because when you hover over one menu it makes the other menu links move.

So sorry to bug you this much, I have been learning CSS for some time now trying to figure this out on my own but I haven't been successful so far.

Thank you kindly.
Ezekiel.