C-bear Posted October 26, 2022 Share Posted October 26, 2022 Hi, I would like to change the font of the word in the menu/navigation bar on my site. I love the font I have so would like to keep that, and only when hovering the navigation bar I would like it to reveal a different font. (whilst also keeping my current animation of the line moving across the bottom of each word on hover) Thanks so much! Link to comment
sayreambrosio Posted October 26, 2022 Share Posted October 26, 2022 36 minutes ago, C-bear said: Hi, I would like to change the font of the word in the menu/navigation bar on my site. I love the font I have so would like to keep that, and only when hovering the navigation bar I would like it to reveal a different font. (whilst also keeping my current animation of the line moving across the bottom of each word on hover) Thanks so much! I don't know how to change the font on hover but I have mine set to italicize on hover with the code below. // ITALIC HOVER FOR NAV LINKS header nav a:hover{font-style: italic;} Designer that loves working with the 'misfits' & International Multi-Genre Author Design Website: fifthestatedesigns.studio Author Website Sayre's Custom Code Collection Link to comment
C-bear Posted October 27, 2022 Author Share Posted October 27, 2022 17 hours ago, sayreambrosio said: I don't know how to change the font on hover but I have mine set to italicize on hover with the code below. // ITALIC HOVER FOR NAV LINKS header nav a:hover{font-style: italic;} Thanks so much for your response, I definitely think I want a completely different font but I appreciate your help! x sayreambrosio 1 Link to comment
tuanphan Posted October 31, 2022 Share Posted October 31, 2022 On 10/27/2022 at 5:50 PM, C-bear said: Thanks so much for your response, I definitely think I want a completely different font but I appreciate your help! x You can use some code like this header nav a:hover{font-family: monospace !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
C-bear Posted November 10, 2022 Author Share Posted November 10, 2022 Thank you so much that worked, the only thing is I would like the new font on hover to be lowercase while the first font remains uppercase, is this possible? Thanks! 🙏 Link to comment
C-bear Posted November 10, 2022 Author Share Posted November 10, 2022 On 10/26/2022 at 6:20 PM, sayreambrosio said: I don't know how to change the font on hover but I have mine set to italicize on hover with the code below. // ITALIC HOVER FOR NAV LINKS header nav a:hover{font-style: italic;} Also, I would like the hover to be italicised as well but this doesn't work alongside the other code, is there a way to have both? So ideally on hover only: Times new roman, lowercase & italicised 🙏 Whilst the navigation remains as the original uppercase font, not italic Thank you so much x Link to comment
sayreambrosio Posted November 10, 2022 Share Posted November 10, 2022 10 minutes ago, C-bear said: Also, I would like the hover to be italicised as well but this doesn't work alongside the other code, is there a way to have both? So ideally on hover only: Times new roman, lowercase & italicised 🙏 Whilst the navigation remains as the original uppercase font, not italic Thank you so much x @tuanphan may be able to help you with the changing of the text. Designer that loves working with the 'misfits' & International Multi-Genre Author Design Website: fifthestatedesigns.studio Author Website Sayre's Custom Code Collection Link to comment
tuanphan Posted November 13, 2022 Share Posted November 13, 2022 @C-bear @sayreambrosio What is site url? We can check easier 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
C-bear Posted January 5 Author Share Posted January 5 @tuanphan Hi the url is https://www.chloebthomas.com Thank you so much! Link to comment
tuanphan Posted January 8 Share Posted January 8 On 11/10/2022 at 11:13 PM, C-bear said: Also, I would like the hover to be italicised as well but this doesn't work alongside the other code, is there a way to have both? So ideally on hover only: Times new roman, lowercase & italicised 🙏 Whilst the navigation remains as the original uppercase font, not italic Thank you so much x Use this div#topNav a:hover { font-style: italic; font-family: Time New Romans; text-transform: lowercase; } 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
KyleKeigan Posted March 9 Share Posted March 9 I've added this code to change my navigation font to italic on hover by switching the font family, however, this is now causing my links to shift on hover. Is there a way to avoid this? Thanks! https://cow-prism-nfr6.squarespace.com/information pw: kyle Link to comment
tuanphan Posted March 11 Share Posted March 11 On 3/10/2023 at 12:50 AM, KyleKeigan said: I've added this code to change my navigation font to italic on hover by switching the font family, however, this is now causing my links to shift on hover. Is there a way to avoid this? Thanks! https://cow-prism-nfr6.squarespace.com/information pw: kyle Add to Design > Custom CSS div.header-nav-item { width: 150px; } KyleKeigan 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
KyleKeigan Posted March 11 Share Posted March 11 Amazing, thank you! With some added padding on the right this worked perfectly. 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