Les dejo un video repasando la posición fija para el header, como vincular por anclaje, hover y active.
html {
scroll-padding-top: 85px;
scroll-behavior: smooth;
}
<script>
// Add active class to the current button (highlight it)
var header = document.getElementById("myTopnav");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
<nav class="topnav" id="myTopnav">
<logo><a href="index.html" class="btn active"><img class="animate__animated animate__pulse animate__infinite infinite" src="imagenes/logo.png" alt=""></a></logo>
<a href="#nos" class="btn">- NOSOTROS</a>
<a href="#dulces" class="btn">- DULCES</a>
<a href="#salados" class="btn">- SALADOS</a>
<a href="#deltak" class="btn">- DELIVERY</a>
<a href="#red" class="btn">- REDES</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>
</nav>
