Jump to content

Change navigation font on hover

Recommended Posts

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

 

Link to comment
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

Link to comment
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
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
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.

Link to comment
  • 1 month later...
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
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;
}

 

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.