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

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

Home Forums Support fixed menu and header – but header a bit smaller in height

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #294765
    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…

    GeneratePress 1.3.46
    GP Premium 1.2.96
    #294767
    Leo
    Staff
    Customer Support

    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.

    #294773
    Wilfred

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

    #294774
    Leo
    Staff
    Customer Support

    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/

    #294776
    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)

    #294837
    Tom
    Lead Developer
    Lead Developer

    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 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.