[Support request] fixed menu and header – but header a bit smaller in height

[Wilfred]

I know how to have a fixed menu and header – but what I really want is to resize the header (smaller logo and remove some section with CSS). Is there an easy way to achieve this? I think there will have to be a Javascript solution because the system needs to know when to show the smaller header…

[Leo]

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.

[Wilfred]

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

[Leo]

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/

[Wilfred]

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)

[Tom]

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 🙂

[Author]

Posts