Jump to content

Hover on header elements

Recommended Posts

  • Replies 11
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

The navigation link are moving because the text gets wider because of the bolding on hover. You could add a minimum width to the nav links, but that probably would probably have a negative impact on the spacing. Removing the bold hover would stop them moving too.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

You can try this Custom CSS:

.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav .header-nav-item {
    min-width: 10em;
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
On 10/17/2023 at 8:21 PM, Jeremy2338 said:

Isn't there a command that would "glue" nav links to the header? 

Thanks for the CSS, however it's not working. Elements that are next to the hovered one still move

 

image.png

 

Use this new code

.header-nav .header-nav-item {
    min-width: 10em;
    overflow: hidden;
    max-width: 150px;
}
.header-nav .header-nav-item a {
    display: inline-block;
}

 

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
9 minutes ago, Jeremy2338 said:

1 - 2em width looks fine, however the elements that are next to the hovered one still move

The purpose of the 10em was to exceed the width of the header navigation links so they don't move on hover/bold, if you set it to 2em it will do nothing which is why you still get the shifting. 

You can either set the width as suggested and have wider than ideal spacing not getting the shift on hover, or you can have better spacing and live with the shifting on hover, alternatively you can change the hover style. Sadly there's not much else to be done with this.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.