Background highlight effect for main navigation link

People item only or all items? If people, use this code

Thanks @tuanphan I would like to highlight all items on hover

Also, how do I change the size of the background box (add padding etc) ?

17 hours ago, tucecoop said:

Also, how do I change the size of the background box (add padding etc) ?

You can add this code under your current hover code

div.header-nav-item>a {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

Thanks so much! Is there a way to change the color of the text on hover back to black, when it's on the active page? At the moment the text on the active page link is green on hover so you can't see it over the background

10 hours ago, tucecoop said:

Thanks so much! Is there a way to change the color of the text on hover back to black, when it's on the active page? At the moment the text on the active page link is green on hover so you can't see it over the background

You can use this CSS code

div.header-nav-item--active>a:hover {
    color: #000 !important;
}