Only have header show when user scrolls up

first of all – sorry i did not post all the code on the css you need i forgot to close the one rule and to close the media-query.
So two curly brackets at the and are missing on initial post. I now corrected the css code above.
please correct your css entries too and see if that is ok for you.

( if you have choosen to switch your hamburger at 990px you had to adjust this code too to 990px)

Do you see my test page?
Otherwise it would be great to see your site to help

____________

edit: you always use the burger – all the time ?
this will not work – because navigation ( and hamburger is part of that) will not work in combination with header: fixed on default
the header : fixed ended at switch to hamburger and goes to scroll away. (postiion relative or absolute ) – if you force on that case a position fixed – hamburger had to be adjusted – maybe this is possible – but at the moment I can’t deal with it.

• This reply was modified 5 years, 2 months ago by Guenni007.

Edit: Alternative Method – with always have fixed header and scroll away header.

Script for child-theme functions.php :
( maybe on some cases it is necessary to have on document ready function – my test page works without )

function hide_header(){
?>
<script>
(function($){

  'use strict';
	var c, 
	currentScrollTop = 0,
	header = $('#header');

   $(window).scroll(function () {
      var a = $(window).scrollTop();
      var b = header.height();
     
      currentScrollTop = a;
     
      if (c < currentScrollTop && a > b + b) {
        header.addClass("hide");
      } else if (c > currentScrollTop && !(a <= b)) {
        header.removeClass("hide");
      }
      c = currentScrollTop;
  });

})(jQuery);		
</script>
<?php
}
add_action('wp_footer', 'hide_header');

this to quick css:
( values depends on our header setting)

.html_header_top.html_header_sticky #header,
.responsive.html_mobile_menu_tablet #top #wrap_all #header,
.responsive #top #wrap_all #header {
    position: fixed !important;
}

#header {
	top: 0px;
	-webkit-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
}

#header.hide {
	-webkit-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
}

@media only screen and (min-width: 990px) {
	#header.hide {
		 transform: translateY(-153px);
	}
}

@media only screen and (max-width: 989px) {
	#header.hide {
                transform: translateY(-95px);
		
	}
	.responsive #top #main {
		padding-top:80px !important; 
		margin:0;
	}
}

by the way – if you have nav below logo – the nav stayes visible if you like
see testpage: https://webers-testseite.de/guenni/

sweet
Thanks for sharing @Guenni007.

Hello.
I use the first code (#1135170). It works really smart. Thanks again.
I use an bigger logo and a lot of text on some pages. While reading the text und scoll up a line the logo comes back und takes to much space.
Is it possible to change the code so that logo comes back only when I´m at the top (or nearly at the top) of the site?

Thanks
.

Thats it – works perfect.
Thank you Mike.