Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Hover effects for navigation links


Blackbearsfire

Question

8 answers to this question

Recommended Posts

  • 0

Add to Design > custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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

508731986_ScreenShot2022-01-18at7_49_55PM.png.c85def0ef52c3da2fdddb091830e984c.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...