Change navigation font on hover

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!

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;}

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

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;}

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! 🙏 

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

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.

@C-bear @sayreambrosio What is site url? We can check easier

@tuanphan Hi the url is https://www.chloebthomas.com 

Thank you so much!

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;
}

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

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;
}

Amazing, thank you! With some added padding on the right this worked perfectly.