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
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
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
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
brigidc.campbell Posted January 19, 2022 Share Posted January 19, 2022 @tuanphan Do you know how to add an image background when hovering over the navigation links? Website: roughcutbrewing.com Link to comment
tuanphan Posted January 20, 2022 Share Posted January 20, 2022 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
brigidc.campbell Posted January 21, 2022 Share Posted January 21, 2022 @tuanphan I would like to add an image on hover and keep the text Link to comment
tuanphan Posted January 22, 2022 Share Posted January 22, 2022 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
brigidc.campbell Posted February 8, 2022 Share Posted February 8, 2022 @tuanphan Thank you this worked great!! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment