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

YORK: Adding sticky nav bar with subtle drop shadow


abbytaylor

Question

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

Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

3 answers to this question

Recommended Posts

  • 0

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;
}

 

Link to post
  • 0

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

 

 

Screenshot 2020-02-29 at 08.33.15.png

Link to post
  • 0

Edit CSS to

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

 

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