¿Alguna vez habías tenido este problema con CSS? En la mayoría de sitios web, en mobile, tenemos un menú que cuando hacemos scroll nos va siguiendo. De cara al usuario es lo mejor porque facilita su navegación y así no tiene que volver a hacer scroll cuando quiera cambiar de pestaña. Pero podemos tener un header que sea transparente, y en ese caso, aunque lo sea, sigue teniendo su contenedor. Este contenedor va a estar por encima del resto de elementos como botones, enlaces, etc. Por lo tanto, en según qué posición el usuario no puede hacer click en esos elementos.

Veamos un ejemplo con la siguiente imagen: a la altura en que está el botón de Enviar el header tiene un position: fixed, que es el que hace que cuando hagamos scroll, éste nos siga. Pero, aunque no se vea porque es transparente, el menú, como decíamos antes, tiene un contenedor que está por encima del resto de elementos. 

Para solucionar esto y que cualquier elemento sea clicable, basta con poner al botón que nos abre el menú un position: fixed también, lo mismo con el logo. Con tan solo eso ya vamos a poder hacer click en nuestros botones, enlaces etc.

A continuación, podemos ver el código antes de la actualización:

header{
  position: fixed;  //Antes el position fixed solo estaba en el contenedor
  top: 0;
  left: 0;
  width: 100%;
  z-index: 5;
  .inner{
    .nav--handler{
      .menu{
        display: block;
        width: 100px;
        height: 100px;
        background-color: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        padding: 40px 30px;
      }
    }
    .logo{
       padding: 10px 0 0;
       max-width: 76px;
       width: 100%;
	 a{
          display: block;
          width: 100%;
          height: auto;
        }
     }
   }
}

Y ahora el código corregido

.header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 5;
  .inner{
    .nav--handler{
      .menu{
	line-height: 0;
        font-size: 0;
        color: transparent;
        display: block;
        width: 100px;
        height: 100px;
        background-color: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        padding: 40px 30px;
        position: fixed; //Añadido position fixed
        top: 0;
      }
    }
    .logo-container {
      color: transparent;
      display: block;
      width: 100px;
      height: 100px;
      background-color: rgba(255, 255, 255, 0.6);
      backdrop-filter: blur(30px);
      position: fixed; //Añadido position fixed
      top: 0;
      right: 0;
      margin-right: 20px;
       }
    }
}

Esperamos que os hayamos ayudado a resolver este problema con CSS. Estad atentos para más :)