Jump to content


Circle Member
  • Posts

  • Joined

  • Last visited

Posts posted by CaleyS

  1. Hello!

    Would like to have all buttons on my website to have an "all-ease-in" effect, so that it feels like you're manually pressing a button on hover.

    However, the buttons on the contact forms, email sign-ups and navigation are not responsive to the CSS.
    These buttons are only changing opacity.  

    For reference, website is www.sovdimedia.com

    CSS I'm currently using:

    .sqs-add-to-cart-button, .sqs-editable-button, .sqs-editable-button-style, .sqs-button-element--primary {
      box-shadow: 5px 5px #000;
      border: 1px solid #000 !important;
      transition: all ease-in 0.2s !important;
    .sqs-block-button-element:hover {
      box-shadow: none;
      transform: translateY(5px) !important;
      transition: all ease-in 0.2s !important;
      opacity: 1 !important;

    What am I doing wrong? 

    Any help would be appreciated!

  2. Hello, 

    I'm trying to add a section above the navigation that's similar to this website. The example is a Showit website, but I'm hoping there is a workaround for Squarespace too. I tried turning on the announcement bar, but it's really small for what I'm after.

    I need this "above nav" section to have:

    • video background capabilities
    • text block; and
    • button functionalities.


    Any help would greatly be appreciated!

    Thank you!

  3. 46 minutes ago, paul2009 said:

    The site you've linked is a Showit site (not a Squarespace site). There isn't a built in feature like this, but if you're familiar with JavaScript, you should be able to write some code that moves a page section above the header.

    I am not familiar with Javascript. Is there a way to still do this with Squarespace?

  4. On 12/24/2020 at 1:29 AM, tuanphan said:

    Add this code to Home > Design > Custom CSS. Replace beaverhero with your banner image url.

    /* Add a banner */
    body.homepage div#siteWrapper:before {
        content: "";
        background-image: url(https://beaverhero.com/wp-content/uploads/2020/11/work-5382501_640-min.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        display: block;
        width: 100%;
        height: 500px;
    /* Add sticky header */
    header#header {
        position: sticky !important;
        top: 0;


    Is it possible to make this have an editable section, where you can add blocks of text, an image or even an email signup form?

    I really like this example here: https://havilahcunnington.com/#home but can't figure out how to match this style.

    Any help would be appreciated!

  • 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.