Blackbearsfire Posted February 25, 2021 Share Posted February 25, 2021 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 Link to comment
0 tuanphan Posted March 1, 2021 Share Posted March 1, 2021 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 Sibylle Posted April 17, 2021 Share Posted April 17, 2021 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 Link to comment
0 tuanphan Posted April 19, 2021 Share Posted April 19, 2021 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 brigidc.campbell Posted January 19 Share Posted January 19 @tuanphan Do you know how to add an image background when hovering over the navigation links? Website: roughcutbrewing.com Link to comment
0 tuanphan Posted January 20 Share Posted January 20 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? 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 brigidc.campbell Posted January 21 Share Posted January 21 @tuanphan I would like to add an image on hover and keep the text Link to comment
0 tuanphan Posted January 22 Share Posted January 22 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); } brigidc.campbell 1 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 brigidc.campbell Posted February 8 Share Posted February 8 @tuanphan Thank you this worked great!! Link to comment
Question
Blackbearsfire
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
Link to comment
Top Posters For This Question
3
1
1
4
Popular Days
Jan 19
1
Feb 25
1
Jan 20
1
Mar 1
1
Top Posters For This Question
brigidc.campbell 3 posts
Sibylle 1 post
Blackbearsfire 1 post
tuanphan 4 posts
Popular Days
Jan 19 2022
1 post
Feb 25 2021
1 post
Jan 20 2022
1 post
Mar 1 2021
1 post
Popular Posts
tuanphan
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
Posted Images
8 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment