Jump to content

Issues with custom CSS

Recommended Posts

Hi,
I managed to place everything I needed in my navigation and also set all the hovering effects.
My issue is now whenever I hover over the items, it seems that they are moving slightly.

Is there something I can do about that?
And since my site has not been published yet, I don't have any links to share. But here is a screen recording of my site.
Hope that will help to understand what I mean.

By the way, here are all the codes I used for that:

//––– Nav-Menu

body:not(.header--menu-open) .header-nav-item--active>a {
    background-image: none !important;
}

.header-nav-item--active a{
font-weight:400 !important;  
}

.header-nav a:hover{
font-weight:400 !important;
}

//––– Social Media
//–––––––––––––––––––––––––––//
.header-actions-action--social  {
// position:fixed;
 //right:3vw;
 //top:1.75vw;
 scale:90%;
}

.header-actions--right .header-actions-action--social .icon:not(:first-child) {
margin-left: 2.5vw;
margin-right: 2vw;
}

//––– CTA - Button

.header-actions .btn {
 //top:1vw;
// height:2vw;
//  margin:1vw 0 1vw 1vw!important;
 // border: solid red 1px!important;
}

.header-actions .btn:hover {
 background-color: white;
 color:#111111;
 font-weight:bold !important;
 box-shadow: inset 0 0 0 2px #111111;
}

 

Link to comment
  • Replies 3
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

1 hour ago, Nima said:

My issue is now whenever I hover over the items, it seems that they are moving slightly.

The navigation moves because bold text is wider than standard-weight text. It's tricky to get around this problem, but could be done with setting minimum widths for the links.

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 12/8/2023 at 1:15 PM, Ziggy said:

The navigation moves because bold text is wider than standard-weight text. It's tricky to get around this problem, but could be done with setting minimum widths for the links.

I tried it out, but it didn't work how I liked it to.
I know it is because of the bold text, but I thought I could help by widening the margins or something like that, but that didn't work either.

Link to comment

You may want to try this additional CSS, but please adjust the pixel EM to as small as you can:

.header-nav a {
  min-width:9.5em;
}

 

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.