Menu position (position)

Hi guys, I’m trying to align my navigation to the bottom of the initial view, however on scrolling down the page I would like it to move to the top and stick. Any help would be appreciated

1 Like

Hi @stokerjohn,

The following code is what I have used on a couple of sites. The navigation Bloc will stick to the top of the screen when it reaches the top.

If you find your content jumps after you apply this (most likely), there is some more CSS you can apply to pad it out, let me know how you go.

Place this in the page header.

<style>
.sticky-bar
{
position: fixed;
top: 0;
z-index: 1000;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
transition: all .2s ease-out;
}
</style>

And in the footer

  1. change the “myID” to anything you want as long as you add the ID to the navigation bloc.
  2. You might need to adjust the offsetTop -3 value to suit your design.
<script>
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("myId");
var sticky = navbar.offsetTop -3;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky-bar");
  } else {
    navbar.classList.remove("sticky-bar");
  }
}
</script>
2 Likes

I’m sorry but how do you insert the code please ? I mean where…

Hey @Pikous

Here is a video showing you how to implement it.

Hope that helps.

2 Likes

Thanks for making this video. :smile:

Many thanks for your help really appreciated will tackle this tomorrow

Cheers

Top man. That looks just what I was looking to do. :pray: