Jump to content

sqsp_guru

Circle Member
  • Posts

    11
  • Joined

  • Last visited

Posts posted by sqsp_guru

  1. @RuthRTW add z-index to #customFloatingButton.

    Updated Code Version (Replace this with old one)

    <style>
        #customFloatingButton {
            position: fixed;
            bottom: 10px;
            right: 10px;
            z-index: 999;
        }
        #customFloatingButton a {
            display: inline-block;
            background-color: #8ACB88;
            color: white;
            padding: 10px 10px;
            text-decoration: none;
            box-shadow: 0px 5px 10px -5px rgba(0,0,0,0.5);
            transition: 200ms;
        }
        #customFloatingButton a:hover {
            transform: scale(1.04);
        }
    </style>

     

  2. 4 hours ago, RuthRTW said:

    @sqsp_guru Thanks for catching syntax error -- can you tell I am new to this? I've attached a screenshot of the updated code in the website header. When I first changed it I saw the button but then when I refreshed, it disappeared again! I tried again to add the corrected code to the header of the home page & still nothing.

     

    Pswd:  NewSite#SS24

    Floating Button Website Header.jpg

    Your password is not working. can you double check the password?

  3. @RuthRTW There is a syntax issue in your Code. 
    Below is the updated version of the code. Replace old code with this new one.
    <style>
        #customFloatingButton {
            position: fixed;
            bottom: 10px;
            right: 10px;
        }
        #customFloatingButton a {
            display: inline-block;
            background-color: #8ACB88;
            color: white;
            padding: 10px 10px;
            text-decoration: none;
            box-shadow: 0px 5px 10px -5px rgba(0,0,0,0.5);
            transition: all 200ms;
            z-index: 9999;
        }
        #customFloatingButton a:hover {
            transform: scale(1.04);
        }
    </style>

  4. @Eyra123 I just checked, you can use the min-width for this situation. here is a code you need to add into CSS code.
    .header-nav-list {
      .header-nav-item {
        margin-bottom: 10px !important;
        a {
          min-width: 220px !important;
        }
      }
    }

    see screenshot.

    Doctor-Screen-Greater-Victoria.png

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