Jump to content

samfiskdesign

Member
  • Posts

    16
  • Joined

  • Last visited

Posts posted by samfiskdesign

  1. @Ziggy Appreciate your help, thanks. That works - realised I had the drop down set to css not html.

    One more question, is there a way to add a smooth 'scroll' transition when I click on the arrow? (Currently it just jumps to the next section)

    This is the code I'm using:

    Quote

     

    <div class="bottom">
      <a class="scroll-indicator" href="#tscroll"></a>
    </div>
    <style>
    .bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
      text-align: center;
    }

    .scroll-indicator {
    display: inline-block;
      width: 24px;
      height: 24px;
      margin: 16px auto;
      border-right: 2px solid #FFF;
      border-bottom: 2px solid #FFF;
      border-bottom-right-radius: 2px;
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
      -webkit-animation-duration: 2s;
              animation-duration: 2s;
      -webkit-animation-name: fade;
              animation-name: fade;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
    }

    @-webkit-keyframes fade {
      0% {
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        opacity: 1;
      }
      75% {
        -webkit-transform: rotate(45deg) translateY(-6px) translateX(-6px);
                transform: rotate(45deg) translateY(-6px) translateX(-6px);
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
    }

    @keyframes fade {
      0% {
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        opacity: 1;
      }
      75% {
        -webkit-transform: rotate(45deg) translateY(-6px) translateX(-6px);
                transform: rotate(45deg) translateY(-6px) translateX(-6px);
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
    }
    </style>

     

     

  2. @Ziggy

    Hello,

     

    Thanks - I tried that way (with code block) but doesn't seem to be working for me. Just showing as plain text on my site.

    Also, supposedly this results in a 'round box with 2 lines going down' according to OP, I'd like an arrow similar to my example if possible!

     

    2032133556_Screenshot2023-01-06at00_11_27.png.8e17c971e8fc9fc82ccc48b55fa4a2b5.png

  3. Site URL: https://samfiskdesign.co.uk/

    Hello,

     

    I'm currently using this code to make my CTA button appear next to the hamburger in mobile view. 

    .header-menu-nav-folder[data-folder="root"] {
        height: auto !important;
        min-height: auto !important;
    }

    1178005305_Screenshot2022-04-08at23_02_15.thumb.png.746c8c0e004a3efde1906f3640f8485e.png

    However it has brought the other elements to the top of the screen as well. How do I:

    a) Align the nav items to the horizontal centre of the screen

    b) Align the social icons to the bottom of the screen

     

    I've tried adjusting top margins for both but would prefer it to be responsive if possible.

    Help would be appreciated!

  4. Hello,

     I'd like to remove the underlines from all navigation links (header and sitewide) and replace with bold text (on rollover and selected page)

    I've looked on various forums on how to remove underlines but nothing has worked so far. I've tried the following:

     

    .header-nav-item--active a {
       background-image: none;
    }

     

    .header-nav-wrapper a {
        background-image: none !important;
    }

     

    /* styling link underlines sitewide */
    .sqs-block-html a {background-image:none!important;}
    .sqs-block-html h1 a, h2 a, h3 a, h4 a, p a {
     border-bottom-style: none !important;  text-decoration-line: none !important;
    }

     

    I would have thought something like this would be easy to change. I'm sure it's possible but my knowledge of CSS is limited.

    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.