YORK: Adding sticky nav bar with subtle drop shadow

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.

https://iamabbytaylor.com/

Thank you,

Abby

Add to Code Injection Footer

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

Next, add to Home > Design > Custom CSS

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

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!

Abby

Edit CSS to

.tuanp {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
	background: #fff;
	box-shadow: 2px 3px 4px black;
}