make wordpress menu sticky on scroll

Question

Hello i am trying to make a wordpress menu sticky on scroll.

In practicality this is what i mean

http://dev.thegabrielmethod.com/ is the main menu which isnt sticky for now

https://www.thegabrielmethod.com/ this is how i want the menu to be on scroll, please check both links

This i what iv been able to do

http://dev.thegabrielmethod.com/gabriel/

using

.banner {
padding: 30px 50px;
}
.banner {
position: fixed;
width: 100%;
top: 0;
left: 0;
border-top: 0px solid #ffffff;
border-bottom: 0px solid #ffffff;
background: #fff;
vertical-align: top;
-webkit-box-shadow: 0px 4px 22px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 4px 22px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 4px 22px 0px rgba(50, 50, 50, 0.75);
z-index: 999999;
}


.nav-bar-below.op-page-header {
margin-top : 100px;
    position: fixed;
    width: 100%;
    background: #155b9b;
    background: -moz-linear-gradient(top,#155b9b 0%,#155b9b 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#155b9b),color-stop(100%,#155b9b));
    background: -webkit-linear-gradient(top,#155b9b 0%,#155b9b 100%);
    background: -o-linear-gradient(top,#155b9b 0%,#155b9b 100%);
    background: -ms-linear-gradient(top,#155b9b 0%,#155b9b 100%);
    background: linear-gradient(top,#155b9b 0%,#155b9b 100%));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#155b9b', endColorstr='#155b9b',GradientType=0 );
}
.op-page-header .navigation a {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 19px;
    text-shadow: 0 1px 1px rgba(249, 249, 249, 0), 0 1px 1px rgba(0,0,0,.5)!important;
    text-rendering: optimizelegibility;
}

which does not give the kind of look on scroll as this

https://www.thegabrielmethod.com/

Can someone please help

Answer 1

Here's the working jsfiddle: https://jsfiddle.net/cyp8ngck/1/

Okay, so here's what i did.
I Created 2 different menus:
1. A normal menu that will be scrolled along with the page.
2. A sticky menu that will be displayed when the normal menu is scrolled outside the viewport and is no longer visible.

CSS for both menu types will is as follows:

/* common CSS styling for both menus to keep the code clean */
    .menu, .sticky-menu {
      display: block;
      text-align: center;
      font-size: 22px;
      font-weight: bold;
      background: #2e2e2e;
      color: #ffffff;
      padding: 15px 0px;
    }

/* code for the sticky menu only */
    .sticky-menu {
      background: #cccccc;
      color: #2e2e2e;
      position: fixed;
      z-index: 9999;
      left:0;
      right:0;
      top:0;
      transform: translateY(-100%);
      transition: all .3s ease;
    }

As you can see the sticky menu is pulled outside the viewport window and is kept hidden until the page is scrolled and the normal is hidden.

Now i just toggled this CSS class with the sticky menu: (It pulls down and pulls up the Sticky Menu)

.pull-sticky-menu {
  transform: translateY(0%);
  transition: all .3s ease;
}

by detecting if the menu height in jQuery:

$(document).scroll(function() {
  var scrollheight = $(this).scrollTop();
  var menuheight = $(".menu").height();
  if (scrollheight > menuheight) {
    $('.sticky-menu').addClass("pull-sticky-menu");
  } else {
    $('.sticky-menu').removeClass("pull-sticky-menu");
  }
});

Here's the code snippet:

 $(document).scroll(function() { var scrollheight = $(this).scrollTop(); var menuheight = $(".menu").height(); if (scrollheight > menuheight) { $('.sticky-menu').addClass("pull-sticky-menu"); } else { $('.sticky-menu').removeClass("pull-sticky-menu"); } }); 

 body { margin: 0; padding: 0; font-family: sans-serif; font-size: 16px; } .container { background: #ffffff; } .menu, .sticky-menu { display: block; text-align: center; font-size: 22px; font-weight: bold; background: #2e2e2e; color: #ffffff; padding: 15px 0px; } .sticky-menu { background: #cccccc; color: #2e2e2e; position: fixed; z-index: 9999; left: 0; right: 0; top: 0; transform: translateY(-100%); transition: all .3s ease; } .pull-sticky-menu { transform: translateY(0%); transition: all .3s ease; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="sticky-menu"> THIS IS STICKY MENU </div> <div class="menu"> THIS IS NORMAL MENU </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis accumsan massa, id scelerisque elit. Morbi vel arcu accumsan, facilisis magna quis, accumsan ex. Cras congue enim aliquam, accumsan nulla tincidunt, dapibus justo. Phasellus nec pellentesque est. Morbi rutrum lectus libero, quis imperdiet turpis ultricies ut. Etiam pharetra dictum dui sit amet iaculis. Curabitur rhoncus gravida augue, dapibus semper nisl rutrum sed. Etiam facilisis lacus eget ullamcorper molestie. Duis vestibulum tortor lorem, sed auctor tellus efficitur id. </p> <p> Maecenas dapibus erat ac erat vehicula, nec iaculis dui faucibus. Mauris non gravida nunc. Duis eget leo sit amet sapien dictum tempus eu eget enim. Ut eu est vel nibh dictum malesuada in a metus. Sed finibus mollis ipsum, scelerisque maximus mauris blandit non. Aenean vel urna nisl. Ut facilisis nibh dolor, non malesuada felis facilisis eu. Maecenas ut neque quis purus rutrum pharetra sed id mauris. Ut eu ex eu turpis tincidunt placerat accumsan sed elit. Duis egestas, lectus et euismod tempor, nunc nibh convallis lectus, fringilla tincidunt odio augue a mauris. Aliquam ultrices arcu et orci laoreet, in congue magna gravida. Mauris posuere quis justo eu egestas. </p> <p> Praesent vehicula venenatis felis vel semper. Aenean pharetra dictum augue, laoreet scelerisque leo euismod vel. Aliquam scelerisque eleifend eleifend. Pellentesque a felis quis diam fringilla cursus at ac nibh. Etiam tellus lectus, vehicula non risus in, pellentesque tincidunt quam. Integer elit magna, euismod sit amet lorem quis, facilisis consectetur metus. Aliquam dictum ante quis laoreet congue. Morbi hendrerit posuere faucibus. Aliquam augue est, faucibus quis consequat in, pretium tincidunt libero. Fusce vulputate aliquam turpis eu sollicitudin. Nam accumsan eget nulla ut molestie. Morbi turpis felis, egestas eget velit et, fringilla sodales est. </p> <p> Duis vel velit quis metus efficitur luctus. Proin porttitor sapien eget diam fringilla mollis. Curabitur interdum efficitur enim, laoreet bibendum dui aliquet vitae. Etiam arcu ipsum, condimentum nec scelerisque vitae, ornare at justo. Duis eget tincidunt sapien. Quisque non arcu volutpat, lacinia sem id, volutpat tellus. Vivamus dui lorem, aliquam non iaculis posuere, euismod et velit. Vestibulum nunc mauris, pharetra porta nisi eu, convallis molestie massa. Donec tincidunt tempus egestas. Sed lectus sem, vestibulum at felis et, finibus egestas sem. </p> <p> Nulla auctor, quam sed efficitur tempor, felis justo egestas justo, ac bibendum sem ante eu nisi. Aliquam erat volutpat. Suspendisse turpis ante, dapibus in purus et, aliquet rutrum arcu. Suspendisse sem massa, ultrices sed felis vel, mollis porta nisl. Curabitur lectus urna, porta eu placerat id, tempor eget erat. Duis mattis eget nisi et bibendum. Aliquam nibh libero, elementum et leo nec, egestas vestibulum lacus. Suspendisse vel augue diam. Phasellus fermentum, quam sed euismod finibus, erat ante fermentum mi, at ullamcorper nisi sapien quis orci. Morbi id sem tincidunt, semper eros non, facilisis velit. Nam tincidunt neque ullamcorper, tristique justo quis, dapibus nunc. In in pharetra enim. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis accumsan massa, id scelerisque elit. Morbi vel arcu accumsan, facilisis magna quis, accumsan ex. Cras congue enim aliquam, accumsan nulla tincidunt, dapibus justo. Phasellus nec pellentesque est. Morbi rutrum lectus libero, quis imperdiet turpis ultricies ut. Etiam pharetra dictum dui sit amet iaculis. Curabitur rhoncus gravida augue, dapibus semper nisl rutrum sed. Etiam facilisis lacus eget ullamcorper molestie. Duis vestibulum tortor lorem, sed auctor tellus efficitur id. </p> <p> Maecenas dapibus erat ac erat vehicula, nec iaculis dui faucibus. Mauris non gravida nunc. Duis eget leo sit amet sapien dictum tempus eu eget enim. Ut eu est vel nibh dictum malesuada in a metus. Sed finibus mollis ipsum, scelerisque maximus mauris blandit non. Aenean vel urna nisl. Ut facilisis nibh dolor, non malesuada felis facilisis eu. Maecenas ut neque quis purus rutrum pharetra sed id mauris. Ut eu ex eu turpis tincidunt placerat accumsan sed elit. Duis egestas, lectus et euismod tempor, nunc nibh convallis lectus, fringilla tincidunt odio augue a mauris. Aliquam ultrices arcu et orci laoreet, in congue magna gravida. Mauris posuere quis justo eu egestas. </p> <p> Praesent vehicula venenatis felis vel semper. Aenean pharetra dictum augue, laoreet scelerisque leo euismod vel. Aliquam scelerisque eleifend eleifend. Pellentesque a felis quis diam fringilla cursus at ac nibh. Etiam tellus lectus, vehicula non risus in, pellentesque tincidunt quam. Integer elit magna, euismod sit amet lorem quis, facilisis consectetur metus. Aliquam dictum ante quis laoreet congue. Morbi hendrerit posuere faucibus. Aliquam augue est, faucibus quis consequat in, pretium tincidunt libero. Fusce vulputate aliquam turpis eu sollicitudin. Nam accumsan eget nulla ut molestie. Morbi turpis felis, egestas eget velit et, fringilla sodales est. </p> <p> Duis vel velit quis metus efficitur luctus. Proin porttitor sapien eget diam fringilla mollis. Curabitur interdum efficitur enim, laoreet bibendum dui aliquet vitae. Etiam arcu ipsum, condimentum nec scelerisque vitae, ornare at justo. Duis eget tincidunt sapien. Quisque non arcu volutpat, lacinia sem id, volutpat tellus. Vivamus dui lorem, aliquam non iaculis posuere, euismod et velit. Vestibulum nunc mauris, pharetra porta nisi eu, convallis molestie massa. Donec tincidunt tempus egestas. Sed lectus sem, vestibulum at felis et, finibus egestas sem. </p> <p> Nulla auctor, quam sed efficitur tempor, felis justo egestas justo, ac bibendum sem ante eu nisi. Aliquam erat volutpat. Suspendisse turpis ante, dapibus in purus et, aliquet rutrum arcu. Suspendisse sem massa, ultrices sed felis vel, mollis porta nisl. Curabitur lectus urna, porta eu placerat id, tempor eget erat. Duis mattis eget nisi et bibendum. Aliquam nibh libero, elementum et leo nec, egestas vestibulum lacus. Suspendisse vel augue diam. Phasellus fermentum, quam sed euismod finibus, erat ante fermentum mi, at ullamcorper nisi sapien quis orci. Morbi id sem tincidunt, semper eros non, facilisis velit. Nam tincidunt neque ullamcorper, tristique justo quis, dapibus nunc. In in pharetra enim. </p> </div> 

Let me know if this helps :)