fixed menu and header - but header a bit smaller in height

Hi there,

Hard to picture what you are after.

Are you able to provide a link to your site and let us know exactly what changes you want? On different devices etc?

Then we should be able to help you out if it can be done with some CSS.

Let us know.

same effect as this website: http://demo.qodeinteractive.com/bridge13/

To copy the exact style/effect might require some custom coding for sure...

The logo change can be done with Navigation Logo though: https://docs.generatepress.com/article/navigation-logo/

This javascript will do the job (used it in other projects):

<script>
    function init() {
        window.addEventListener('scroll', function(e){
            var distanceY = window.pageYOffset || document.documentElement.scrollTop,
                shrinkOn = 200,
                header = document.querySelector("headertje");
            if (distanceY > shrinkOn) {
                classie.add(header,"smaller");
            } else {
                if (classie.has(header,"smaller")) {
                    classie.remove(header,"smaller");
                }
            }
        });
    }
    window.onload = init();
</script>

Will try to use this in GeneratetPress. It also uses Classie (http://callmenick.com/post/add-remove-and-check-classes)

Classie isn't necessary if you use jQuery (although your example is using vanilla JS which is cool too).

$( '.site-header' ).hasClass( 'whatever' )

To answer your question, that will definitely be pretty difficult to achieve, however it is possible. Let me know how far you get :)