Jump to content

YORK: Adding sticky nav bar with subtle drop shadow

Recommended Posts

Site URL: https://iamabbytaylor.com/

Hi all!

I'm a freelance illustrator and designer in the process of updating my website. I chose Squarespace because web design is not one of my talents!  I'd really like to be able to keep my nav bar white, but add a very subtle drop shadow beneath it, make it sticky, and a bit narrower than it is now.  My website is: https://iamabbytaylor.com/.

I've found a few bits of custom css that will make the nav bar sticky, but they've all been a bit hit and miss and I can't find one that will add the subtle drop shadow too. 

If anyone knows any custom CCS I could use to achieve this, that would be amazing!

I'm using the York template.


Thank you,


Link to comment
  • Replies 3
  • Views 1.8k
  • Created
  • Last Reply

Add to Code Injection Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 var visibleTop = 10;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
        else {
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;

Next, add to Home > Design > Custom CSS

.tuanp {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thank you tuanpan! That's closer to what I want!  I've done as you've said, and it's created a sticky header. However, the header is transparent and doesn't have a drop shadow beneath it as I would like. The https://www.awwwards.com/ has exactly what I'm after: A white sticky nav bar, with a subtle grey drop shadow that separates it from the rest of the page. I've attached a screen grab of what the code you've suggested has done. It creates a sticky nav bar, but it's transparent and doesn't have a drop shadow, so as you scroll it gets lost in the content. I als


(I'd also like to experiment with having a side navigation instead...like this site: https://hellomichael.com/?section=work but I imagine that's outside of the templates capabilities haha. A side nav would hide less of the work on my website.)


Thanks so much for your help so far!





Screenshot 2020-02-29 at 08.33.15.png

Link to comment


This topic is now archived and is closed to further replies.

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