Hide navigation bar on scroll - Athlete Wordpress Theme

Question

I am trying to configure my Wordpress navigation menu bar to hide on scroll down and appear back on scroll up. My site url is inforce.bg Please see the part of style.css code below. Let me know if you need additional information.

.header{
    margin-bottom: 0;
}
#header {
    position: fixed;
    top: 0;
}
#header.reveal:not(.alt) {
    box-shadow: 0 5px 8px 5px rgba(0, 0, 0, 0.2);
    position:fixed;
    width:100%;
    top:0;
}
#header.reveal:not(.alt) {
    -webkit-animation: reveal-header 1s cubic-bezier(0.005, 0.975, 0.73, 1);
    animation: reveal-header 1s cubic-bezier(0.005, 0.975, 0.73, 1);
    border:1px solid transparent;
    background:#0f0f0f;
}
.header{
    position:relative;
    width:100%;
    z-index:9999;
    background:#0f0f0f;

}
.header.header-container  {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    margin: 0 auto;
}
.page-category .header-container {
    background: none repeat scroll 0 0 #0f0f0f;
}
.page-category  #header.reveal:not(.alt) {
    -webkit-animation: reveal-header2 1s cubic-bezier(0.005, 0.975, 0.73, 1);
    animation: reveal-header2 1s cubic-bezier(0.005, 0.975, 0.73, 1);
}

/*-- Logo --*/
.logo {
    padding: 0 !important;
    text-align:center;
}
.header-container .logo img{
    margin: 30px 10px 25px 10px;
}

/*-- Navigation --*/

/* mobile menu */
.menu-wrap{
    border:1px solid transparent;
    background:#ec3642;
    position:fixed;
    width:270px;
    height:100%;
    transition:transform ease 1s;
    -o-transition:-o-transform ease 1s;
    -ms-transition:-ms-transform ease 1s;
    -moz-transition:-moz-transform ease 1s;
    -webkit-transition:-webkit-transform ease 1s;
    transform:translateX(270px);
    -o-transform:translateX(270px);
    -ms-transform:translateX(270px);
    -moz-transform:translateX(270px);
    -webkit-transform:translateX(270px);
    right:0;
    top:0;
    margin-right:-18px;
    z-index:999999;
    overflow-y:scroll;
    padding:0 15px;
}
.show-menu .menu-wrap {
    transition:all ease 0.6s;
    -o-transition:-o-transform ease 0.6s;
    -ms-transition:-ms-transform ease 0.6s;
    -moz-transition:-moz-transform ease 0.6s;
    -webkit-transition:-webkit-transform ease 0.6s;
    transform:translateX(0);
    -o-transform:translateX(0);
    -ms-transform:translateX(0);
    -moz-transform:translateX(0);
    -webkit-transform:translateX(0);
}
.content-wrapper:before {
    background:rgba(0, 0, 0, 0.5);
    content: "";
    height: 0;
    position: absolute;
    right: 0;
    top: 0;
    opacity:0;
    transition: opacity 0.5s ease 0s;
    -o-transition: opacity 0.5s ease 0s;
    -ms-transition: opacity 0.5s ease 0s;
    -moz-transition: opacity 0.5s ease 0s;
    -webkit-transition: opacity 0.5s ease 0s;
    width: 0;
    z-index: 10000;
}
.show-menu .content-wrapper:before {
    height: 100%;
    opacity:1;
    transition: opacity 0.5s ease 0s;
    -o-transition: opacity 0.5s ease 0s;
    -ms-transition: opacity 0.5s ease 0s;
    -moz-transition: opacity 0.5s ease 0s;
    -webkit-transition: opacity 0.5s ease 0s;
    width: 100%;
}
.main-menu{position: relative;}
.main-menu h4{
    margin:0;
    text-transform:uppercase;
    font-size:18px;
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,0.35);
}
.menu-wrap ul {
    list-style: outside none none;
    padding: 0;
}
.menu-wrap ul.nav-menu > li {
    padding-left: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.menu-wrap li a {
    color: #fff;
    display: block;
}
.menu-wrap ul.nav-menu > li > a {
    font-size: 14px;
    padding: 11px 35px 11px 0;
}

You can't do this by CSS alone. You will be needing Javascript or jquery for it. https://stackoverflow.com/a/17713615/4053617 it can help you — vijayscode, Jun 01 '17 at 20:01
vijayscode thanks for the suggestion, but adding the javascript code to the functions.php file led to a crush. — Sensi, Jun 02 '17 at 16:42

Herlander Pinto · Answer 1 · 2017-10-23T15:33:48.147

0

Although we're missing details from your site, it seems this is basically what you want to do:

var scrollTop = 0;
window.addEventListener("scroll", function(e) {
  var s = window.pageYOffset || document.documentElement.scrollTop
  if (s > scrollTop) {
    document.getElementById("globalNav").classList.add("collapsed");
  } else {
    document.getElementById("globalNav").classList.remove("collapsed");
  }
  scrollTop = s;
})

nav {
  background-color: #474747;
  color: #f9f9f9;
  position: fixed;
  width: 100%;
  
  /* Relevant to the hiding transition */
  max-height: 200px;
  overflow: hidden;
  transition: max-height 0.5s ease;

}

nav.collapsed {
  max-height: 0;
}
/* --- */


body {
  font-family: Arial, "sans serif";
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

nav ul li {
  display: inline-flex;
}

nav ul li a {
  color: #f9f9f9;
  text-decoration: none;
  padding: 5px;
  transition: color 0.3s ease;
}

nav ul li a:hover {
  color: #d1d1d1;
}

nav ul li+li {
  border-left: 1px solid lightgray;
}

<nav id="globalNav">
  <ul>
    <li><a href="#">Home</a>
    <li><a href="#">About</a>
    <li><a href="#">Contact</a>
  </ul>
</nav>
<main>
  <div style="height: 300vh"> <!-- Simulating content --></div>
</main>

I'll be able to improve my answer with more detail.

Credits:

Detecting Scroll Direction

Using max-height instead of height: auto

edited Oct 23 '17 at 15:33

answered Jun 01 '17 at 22:47

Herlander Pinto

68
7

Thank you! My website is currently up and running [InForce](https://inforce.bg). Please let me know what further details should I provide you with. – Sensi Jun 02 '17 at 16:52
So it looks like your site doesn't have a sticky navbar yet, which you'll need for my answer to work. I implemented a basic fixed header in my JSFiddle but you'll also have to set the
section margin-top to be equal to the height of the navbar using JavaScript, or CSS if you have a fixed height navbar.
– Herlander Pinto Jun 02 '17 at 16:56
You may also want to update your question to have some real code and remove the screenshot of the CSS. – Herlander Pinto Jun 02 '17 at 16:58
So it looks like you _do_ have a sticky header on larger screens, so you'll have to apply a class to `
` to make it disappear on large screens only using the JavaScript method above (you can do that with CSS `@media` queries), _and you should probably also use debounce to make sure the nav isn't jittery when the user is scrolling around_. Just remember to set `overflow: hidden` on the header as well.
– Herlander Pinto Jun 02 '17 at 17:07
Thank you! Can you provide the CSS media queries I need to add and tell me how and where to add the debounce function? – Sensi Jun 02 '17 at 17:39
You can learn about debouncing [here](https://css-tricks.com/debouncing-throttling-explained-examples/), and the media queries [here](https://css-tricks.com/debouncing-throttling-explained-examples/) – Herlander Pinto Jun 02 '17 at 18:00

Hide navigation bar on scroll - Athlete Wordpress Theme

1 Answers1