Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Adding a sticky navigation to the Wexely template


Recommended Posts

  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

I can help with the second  request, I used these steps to add a site wide back to top arrow or button. Both examples I have put the button in the lower right hand corner, it fades in after you scroll for a bit. 

https://www.adlyticmarketing.com/blog/squarespace-how-to-add-a-back-to-top-button/

you can see a back to top arrow on this site. 

my random views derrick Lee parker 

 

For one page you use this. Post it in the advance header code injection for each page you want the button,  just about as easy as the top method, if not easier. You can see it on this site

https://atlanticcoastwater.com/

 

<!-- Styles your button (this is a black square with white text -->
<style>
.back-to-top {
    background-color: #000000;
    color: #FFFFFF;
    opacity: 0;
    transition: opacity .6s ease-in-out;
    z-index: 999;
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border-radius: 0%;
}
  
  a.back-to-top {
    font-weight: 1000;
    letter-spacing: 2px;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    padding-left: 2px;
    padding-top: 14px;
}
  
  .back-to-top.show {
       opacity: 1;
  }
</style>

<!-- Adds the back to top link to your website -->
<a href="#top" id="back-to-top" class="back-to-top" style="display: inline;">Top</a>

<!-- Fades in the button when you scroll down -->
<script>
  var link = document.getElementById("back-to-top");
  var amountScrolled = 250;

function addClass(el, className) {

    if (el.classList) {
        el.classList.add(className);
    } else {
        el.className += ' ' + className;
    }

}

function removeClass(el, className) {
    if (el.classList)
      el.classList.remove(className);
    else
      el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');    
}
  
window.addEventListener('scroll', function(e) {
     if ( window.scrollY > amountScrolled ) {
         addClass(link, 'show');
     } else {
         removeClass(link, 'show');
     }
 });
</script>

 

Edited by derricksrandomviews
Link to post

Yes, I meant to ask you about that. Some folks say the style function works in a markdown block on a page with personal plan but I have not tried that. I have an older grandfathered plan so I can code but I also have a limit of 20 pages on my site and I am using them all. 

Edited by derricksrandomviews
Link to post

 

If you want a simple link that works on all pages paste this in a code block on the footer of your site. Both options work with a personal plan. Paste this inside  

 href="#" class="btt"> Back to Top 

I tried both on a Wexley site that I have and they worked.  I modified the code to work in a markdown box. Just add the box and the code to the header of any page you want to use the floating back to top button.

<style>
.back-to-top {
    background-color: #000000;
    color: #FFFFFF;
    opacity: 0;
    transition: opacity .6s ease-in-out;
    z-index: 999;
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border-radius: 0%;
}
  
  a.back-to-top {
    font-weight: 1000;
    letter-spacing: 2px;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    padding-left: 2px;
    padding-top: 14px;
}
  
  .back-to-top.show {
       opacity: 1;
  }
</style>


<a href="#top" id="back-to-top" class="back-to-top" style="display: inline;">Top</a>


<script>
  var link = document.getElementById("back-to-top");
  var amountScrolled = 250;

function addClass(el, className) {

    if (el.classList) {
        el.classList.add(className);
    } else {
        el.className += ' ' + className;
    }

}

function removeClass(el, className) {
    if (el.classList)
      el.classList.remove(className);
    else
      el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');    
}
  
window.addEventListener('scroll', function(e) {
     if ( window.scrollY > amountScrolled ) {
         addClass(link, 'show');
     } else {
         removeClass(link, 'show');
     }
 });
</script>
 

Edited by derricksrandomviews
Link to post
19 hours ago, derricksrandomviews said:

href="#" class="btt"> Back to Top

Hi Derrick! Thanks again for your reply. Bare with me as I'm not that fluent with all of this and I'm a bit lost with your second solution.

Do I enter this code in the footer by using the "code <->" option under "more"?

 href="#" class="btt"> Back to Top 
Link to post

Also, am I adding this whole code to the header and navigation to stick? I really appreciate your time.

<style>
.back-to-top {
    background-color: #000000;
    color: #FFFFFF;
    opacity: 0;
    transition: opacity .6s ease-in-out;
    z-index: 999;
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border-radius: 0%;
}
  
  a.back-to-top {
    font-weight: 1000;
    letter-spacing: 2px;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    padding-left: 2px;
    padding-top: 14px;
}
  
  .back-to-top.show {
       opacity: 1;
  }
</style>


<a href="#top" id="back-to-top" class="back-to-top" style="display: inline;">Top</a>


<script>
  var link = document.getElementById("back-to-top");
  var amountScrolled = 250;

function addClass(el, className) {

    if (el.classList) {
        el.classList.add(className);
    } else {
        el.className += ' ' + className;
    }

}

function removeClass(el, className) {
    if (el.classList)
      el.classList.remove(className);
    else
      el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');    
}
  
window.addEventListener('scroll', function(e) {
     if ( window.scrollY > amountScrolled ) {
         addClass(link, 'show');
     } else {
         removeClass(link, 'show');
     }
 });
</script>

Link to post

I don't think you need to do both do you? I would use one or the other. The back to top header link code should look exactly  like this in the header code block.

<p><a href="#" class="btt"> Back to Top </a></p>

Yes, you paste the whole css code, all of it, in the header markdown box to get the floating back to top button to work. 

 

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...