Hover effects for navigation links

Can someone post the css code to add the hover effects into the navigation links like changing color or opacity?

This used to be easy to accomplish on version 7 in templates but I don't know how to code it into my site on 7.1

Add to Design > custom CSS

/* nav hover */
.header-nav-item>a:hover {
    color: red !important;
}
.header-nav-folder-item:hover a {
    color: red !important;
}

Hi Tuanphan

The custom CSS works well. Thank you, solved one of my issues. How do you make text additionally bold on hover in CSS?

Kind regards,
Sibylle

On 4/18/2021 at 1:54 AM, Sibylle said:

Hi Tuanphan

The custom CSS works well. Thank you, solved one of my issues. How do you make text additionally bold on hover in CSS?

Kind regards,
Sibylle

 

Use this

/* nav hover */
.header-nav-item>a:hover {
    color: red !important;
	font-weight: bold !important;
}
.header-nav-folder-item:hover a {
    color: red !important;
	font-weight: bold !important;
}

@tuanphan Do you know how to add an image background when hovering over the navigation links?

Website: roughcutbrewing.com

On 1/19/2022 at 9:50 AM, brigidc.campbell said:

@tuanphan Do you know how to add an image background when hovering over the navigation links?

Website: roughcutbrewing.com

Add image + Hide text, or add image + keep text?

@tuanphan I would like to add an image on hover and keep the text

17 hours ago, brigidc.campbell said:

@tuanphan I would like to add an image on hover and keep the text

Add to Design > Custom CSS

div.header-nav-item a:hover {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
div.header-nav-item:nth-child(1) a:hover {
    background-image: url(https://cdn.pixabay.com/photo/2018/07/28/02/26/puffins-3567175__480.jpg);
}
div.header-nav-item:nth-child(2) a:hover {
    background-image: url(https://cdn.pixabay.com/photo/2022/01/18/16/49/town-6947538__340.jpg);
}

@tuanphan Thank you this worked great!!