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

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

Question

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

alt text

screen-shot-2017-10-04-at-124600-am-copy.jpg.3a9316e4db755196b817bdece7e48390.jpg

screen-shot-2017-10-04-at-124616-am-copy.jpg.33c9768915ed3466028f03da0d941813.jpg

Edited by jpcarr4
Initial Revision

Share this post


Link to post

10 answers to this question

Recommended Posts

  • 1

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.

Share this post


Link to post
  • 1

@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 :)

Share this post


Link to post
  • 0

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


Share this post


Link to post
  • 0

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?

screen-shot-2018-04-25-at-81305-pm.png.3394f2a0a707700ca350e97e0eb6d3e6.png

Share this post


Link to post
  • 0

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 screenshotalt text

screen-shot-2018-05-04-at-64018-pm-copy.png.4a0f7801909e47038d10526d5c37b540.png

Share this post


Link to post
  • 0

@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?

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0
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!

Share this post


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