Jump to content

Primary button hover code not working with hidden header

Go to solution Solved by Ziggy,

Recommended Posts

Hi there, I am using the following code block at the page level to remove the header:  

<style>
	header {display:none}

}
</style>

I am now trying to create a new button style on hovering for the tertiary button in my site style. Within "Site Styles" I have a 2px black outline on a pill shaped button with a transparent fill and black text. When I hover over the button, I want the button to change the 2px outline and fill to a teal color and the text change to white.

When I insert the following at the page level along with the header, nothing changes, and also, the header appears again. 

<style>
	header {display:none}
  
sqs-block-button-element--small sqs-button-element--tertiary sqs-block-button-element:hover { background-color: #ffffff
  border: 2px solid #ffffff
  
}
</style>

Help? I can't share my site because I am currently in a two week trial moving my site from 7.0 to 7.1. 

Link to comment
  • Replies 5
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

9 hours ago, leejay said:

Help? I can't share my site because I am currently in a two week trial moving my site from 7.0 to 7.1. 

If you add a site wide password you can also share your website URL:
https://squarefortytwo.com/squarespace-guides/add-a-site-wide-password-to-your-squarespace-website

9 hours ago, leejay said:
<style>
	header {display:none}

}
</style>

This code has an extra closing curly-bracket which would cause a syntax error that can stop CSS rendering correctly.

9 hours ago, leejay said:
<style>
	header {display:none}
  
sqs-block-button-element--small sqs-button-element--tertiary sqs-block-button-element:hover { background-color: #ffffff
  border: 2px solid #ffffff
  
}
</style>

In this code you are missing dots from in front of all of the classes and missing a semi-colon after the background colour, it should look more like this:

<style>

  header {
    display:none;
  }

  .sqs-block-button-element--small .sqs-button-element--tertiary .sqs-block-button-element:hover { 
    background-color: #ffffff;
    border: 2px solid #ffffff;  
  }
  
</style>

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) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
7 hours ago, Ziggy said:

If you add a site wide password you can also share your website URL:
https://squarefortytwo.com/squarespace-guides/add-a-site-wide-password-to-your-squarespace-website

This code has an extra closing curly-bracket which would cause a syntax error that can stop CSS rendering correctly.

In this code you are missing dots from in front of all of the classes and missing a semi-colon after the background colour, it should look more like this:

<style>

  header {
    display:none;
  }

  .sqs-block-button-element--small .sqs-button-element--tertiary .sqs-block-button-element:hover { 
    background-color: #ffffff;
    border: 2px solid #ffffff;  
  }
  
</style>

Thanks for your help. Here's the site: https://bagpipe-bell-tdb2.squarespace.com/resume/ and password is "thisisthepassword". 

I inserted the code you created but it's still only doing a grey color upon hovering. It seems like there's a semi-opaque mask that's happening but I cannot for the life of me find where that would be happening based on what I see within Site Styles.

Any idea? 

Link to comment
  • Solution

Try this adjustment of your code:

<style>

  header {
    display:none;
  }

  .sqs-button-element--secondary{
  transition:ease-in-out 300ms !important;
  &:hover { 
    background-color: #ffffff !important;
    color:#000000 !important;
    border: 2px solid #ffffff;  
  }
}
  
</style>

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) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
1 hour ago, Ziggy said:

Try this adjustment of your code:

<style>

  header {
    display:none;
  }

  .sqs-button-element--secondary{
  transition:ease-in-out 300ms !important;
  &:hover { 
    background-color: #ffffff !important;
    color:#000000 !important;
    border: 2px solid #ffffff;  
  }
}
  
</style>

That worked, thank you!

Link to comment
2 hours ago, leejay said:

That worked, thank you!

Fantastic!

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) 
 🖼️ Gallery Lightbox 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.