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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
brigidc.campbell Posted February 8, 2022 Share Posted February 8, 2022 @tuanphan Thank you this worked great!! Link to comment
kkf_magi Posted June 3 Share Posted June 3 (edited) On 3/1/2021 at 3:00 PM, tuanphan said: Add to Design > custom CSS /* nav hover */ .header-nav-item>a:hover { color: red !important; } .header-nav-folder-item:hover a { color: red !important; } @tuanphan Hi Tuan and first of all thank you so much for your great support for everyone here! I used this css and it worked great for my navigation menus except one. I have a page called About 2 in which I have inverted the colors (you'll see). And on that page the hover navigation code isn't working. It's also doesn't wotking on the mobile view. How can I solve this? https://flute-teal-7fwk.squarespace.com/config/ Password: purplebutterfly Update: I have the same issue with my title hover effect and color as well. Edited June 3 by kkf_magi Link to comment
tuanphan Posted June 5 Share Posted June 5 On 6/3/2024 at 11:46 PM, kkf_magi said: @tuanphan Hi Tuan and first of all thank you so much for your great support for everyone here! I used this css and it worked great for my navigation menus except one. I have a page called About 2 in which I have inverted the colors (you'll see). And on that page the hover navigation code isn't working. It's also doesn't wotking on the mobile view. How can I solve this? https://flute-teal-7fwk.squarespace.com/config/ Password: purplebutterfly Update: I have the same issue with my title hover effect and color as well. I see it is fine on About 2 page Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
kkf_magi Posted June 5 Share Posted June 5 @tuanphan Thank you for the response. Yes, all hover effects are fine now except the mobile view of the About 2 Page. Probably I have made a mistake in the css code somewhere. I'm attaching the code for About 2 Page: <style> #block-yui_3_17_2_1_1717149715486_3373 p { font-family: 'Arial' !important; } #block-979157697c9f4e2b8b39 p { font-family: 'Bebas' !important; } .burger-inner>div { background-color: black !important; } #collection-665990f3dafef7079b061afa header#header.shrink { background: white !important; } .header-nav-folder-content { background: white !important; } #header a {color: black !important;} </style> My idea on this About 2 page was just to invert the black and white colors (for the main navigation and basically everything that is white to become black and vice versa) and to change the font of my bio text (which I was able to do) and nothing more. Thank you! Link to comment
tuanphan Posted June 7 Share Posted June 7 On 6/5/2024 at 6:01 PM, kkf_magi said: @tuanphan Thank you for the response. Yes, all hover effects are fine now except the mobile view of the About 2 Page. Probably I have made a mistake in the css code somewhere. I'm attaching the code for About 2 Page: <style> #block-yui_3_17_2_1_1717149715486_3373 p { font-family: 'Arial' !important; } #block-979157697c9f4e2b8b39 p { font-family: 'Bebas' !important; } .burger-inner>div { background-color: black !important; } #collection-665990f3dafef7079b061afa header#header.shrink { background: white !important; } .header-nav-folder-content { background: white !important; } #header a {color: black !important;} </style> My idea on this About 2 page was just to invert the black and white colors (for the main navigation and basically everything that is white to become black and vice versa) and to change the font of my bio text (which I was able to do) and nothing more. Thank you! You mean change background black to white, and change nav items from white to black? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
kkf_magi Posted June 7 Share Posted June 7 @tuanphan No, all colors are perfect. In mobile view in all pages that are black, the hovering red effect is there. But when I'm in the About Page (the white one), the hovering effect doesn't work when browsing on the menu - there is no red color at all. And I don't know how can I fix this. Link to comment
tuanphan Posted June 10 Share Posted June 10 You can use this CSS code div.header-nav-item--active>a, div.header-menu-nav-item--active div { color: #de3163 !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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