How can I lock my navigation bar to the top after scrolling past my logo? (Moshka Template)

So I have my logo top center at 500px and underneath it, centered, is my navigation bar. I would like to be able to scroll down, past the logo and then lock my navigation bar (along with the header color background) to the top of the screen so it's always there, across the whole site. I haven't yet found a custom css code that does all that. I was hoping someone could point me in the right direction.

I've uploaded two screenshots. The first representing the before, with the logo, and the second being the after, once you've scrolled down and the nav bar locks into place at the top.

Thank you!!!!

furthermore, i guess this would be called "sticky" and i mean "sticky" rather than "fixed"

so this is what i have in my custom css. it works with just the header but not with the header nav.

header nav
{
 position: -webkit-sticky;
 position: sticky;
 z-index: 99999;
 top: 0px;}

OK so I figured it out thanks to this thread: https://answers.squarespace.com/questions/100099/how-to-apply-sticky-navigation-in-native-template.html however there are some changes to be made, specifically with the moksha template. thanks to user @ybudianto for the answer in the linked thread.

this goes into custom css

header nav.fixed{
   width: 100%;
   position: fixed;
   display: block;
   background-color: #FFC414;  //prevent overlapping
   top: 0;
   left: 0;
   z-index: 9999;               //also prevent overlapping
}

and this goes into footer code injection

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).on('scroll',function(){
   if ($(document).scrollTop() > 243) {
       $('header nav').addClass('fixed')
   } else {
       $('header nav').removeClass('fixed')
   }

});
</script>

notice the slight difference, instead of "#navBlock" it is now "header nav" and it all works fine. I think due to the way the nav is setup in moksha, css position sticky doesn't work. this script is needed instead. good luck out there everyone.

I am trying to do this same thing but my navigation is not coming down with the nav bar when I do so. Any suggestions?

Hello @jpcarr4 This worked very well, but applied only to the secondary navigation in Moshka template. My primary navigation does not scroll down, such that I have a white bar (I changed the color to #ffffff) with my secondary navigation button scrolling down as it should. Thoughts?

I used this and it works great except, the navigation bar is very thin and in a color I didnt select. How do I go about changing these two properties? See attached screenshot

@jpcarr4 Worked for the secondary navigation bar, but not the primary. Only shows menu items that are right of the logo.

Any idea on how to get both the primary and secondary navigation bars showing?

@joshuacarl_ and @Laertides

im so sorry this was so long ago. i have no idea how i got everything to work back then. I'm not a coder just some dude. But now on my website i have the nav bars fading away when scrolling down and fading back in when scrolling up. if you're interested in that i'll post the code below. good luck! happy coding!

for custom css:

header{
 position: fixed;
 width: 100%;
 z-index: 9998;
 }

main{
 padding-top: 100px;
}

ajax{
 z-index: 9999;
}

@media only screen and (max-width: 1000px){ main {
 padding-top: 0px;
 }
}

for advanced code injection:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).on('scroll',function(){
  if ( $(window).width() > 1000){ 
  if ($(document).scrollTop() > 100){
       $('header').fadeOut();
   }  
  else {
       $('header').fadeIn();
   }
  }
});
</script>

https://www.accent.pictures to see it in action :)

Sorry to be digging into this again haha, but i can't seem to get padding-right to work in the css, as of now it is too close to the right side, any ideas?

On 7/5/2018 at 1:28 AM, jpcarr4 said:

@joshuacarl_ and @Laertides

im so sorry this was so long ago. i have no idea how i got everything to work back then. I'm not a coder just some dude. But now on my website i have the nav bars fading away when scrolling down and fading back in when scrolling up. if you're interested in that i'll post the code below. good luck! happy coding!

for custom css:

header{
 position: fixed;
 width: 100%;
 z-index: 9998;
 }

main{
 padding-top: 100px;
}

ajax{
 z-index: 9999;
}

@media only screen and (max-width: 1000px){ main {
 padding-top: 0px;
 }
}

 

 

for advanced code injection:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).on('scroll',function(){
  if ( $(window).width() > 1000){ 
  if ($(document).scrollTop() > 100){
       $('header').fadeOut();
   }  
  else {
       $('header').fadeIn();
   }
  }
});
</script>

 

 

https://www.accent.pictures to see it in action :)

This worked perfectly! Thanks so much!

Thanks for the idea this article helps me a lot but i converted it to JavaScript. Continue sharing thanks