CSS

sticky header css

nav {
    position: sticky; top: 0;
}

css sticky header

<!-- https://www.w3schools.com/howto/howto_js_sticky_header.asp -->

<style>

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 102px;
}

</style>

<script>
	window.onscroll = function() {myFunction()};

	var desktopHeader = document.getElementById("yourHeader");
	var stickyHeader = desktopHeader.offsetTop;

	function myFunction()
	{
		if(window.pageYOffset > stickyHeader) 
		{
			desktopHeader.classList.add("sticky");
		} 
		else 
		{
			desktopHeader.classList.remove("sticky");
		}
	}
</script>