Diminuir o Menu fixo no Scroll.

O menu fixo pode ser uma boa solução de UX Design, esse tipo permite que o usuário navegue entre as principais páginas do site a qualquer momento durante a navegação, mas dependendo do tamanho do menu fixo isso pode ser um problema.
Pensando nisso muitos sites usam um técnica que diminuem o tamanho de logo, fonte e até ocultam alguns elementos assim a barra fica menor e o usuário ainda pode usar o menu. 

Podemos fazer isso utilizando o Jquery.

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

Primeiro, defina o estilo da sua barra, ou copie o exemplo abaixo.

<style>

body{margin: 0; height: 1300px;}

nav{
background-color: #8BC34A;
display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
top:10px;
height: 120px;
width: 100%;
transition: all 0.6s;
}

.logo{
font-size: 6rem;
color: #000;
transition: all 0.4s;
}

.lista a{
font-size: 1.5rem;
color: #fff;
}

.lista{
display: flex;
flex-direction: row;
}

.lista li{
margin-left: 30px;
list-style-type:none
}
/**/
.nav-logo{
font-size: 3rem;
color: #fff;
transition: all 0.4s;
}

.nav-cor{
height: 60px;
transition: all 0.6s;
background-color: #b4f668;
}

</style>

Perceba que a Class ".nav-logo e .nav-cor" serão usadas na função do Jquery.

Exemplo HTML.

<nav>
<h1 class="logo">logo</h1>
<ul class="lista">
<li><a href="#">Home</a></li>
<li><a href="#">Rates</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>

Segundo, criar a função para monitorar o scroll, e criar uma variável para armazenar o valor do scroll.

 $(window).scroll(function () {
          var topWindow = $(this).scrollTop();

  });

Terceiro, dentro vamos colocar uma condição que pega o valor que esta o scroll e colocar um tamanho para comparar.

if (topWindow > 70 ) {
            $('nav').addClass('nav-cor');
            $('.logo').addClass('nav-logo');
 } else{
            $('nav').removeClass('nav-cor');
            $('.logo').removeClass('nav-logo');
 }

Perceba que dentro da condição podemo colocar o evento de adicionar ou remover a Class.

Esse estilo vai sobre escrever o atual, buscando a Tag ou a Class de referencia e depois adicionando ou removendo a Class indica. 

Você sabia que é possível programar com o RASPBERRY PI para WEB?

Confira no link abaixo.
https://desenvolvedor-web.blogspot.com/2020/03/instalar-no-raspberry-pi-o-apache-php.html

CONFIRA O MELHOR CONTEÚDO SOBRE CRIAÇÃO DE SITE E DESIGNER

Confira no link abaixo

https://estou-criando.blogspot.com/2021/04/estou-criando-divi-builder-plugin.html