Home Forums Trusted Pro Header Enlarge, Shrink

This topic contains 4 replies, has 3 voices, and was last updated by  Andy 4 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #6029

    Phillip Allen
    Participant

    How can I disable the header size change when scrolled.  dev.globaldisciples.org

    #6030

    Andy
    Keymaster

    Hi Phillip

    If I’m understanding correctly, this Additional CSS should do it:

    #masthead.scrolled #site-branding {
        padding: 20px 0;
    }
    
    #masthead.scrolled #site-branding img {
        max-height: unset;
    }
    
    #masthead.scrolled #site-description {
        padding: 20px 0 0 0;
    }
    
    #masthead.scrolled .top-tel {
        padding: 5px 15px;
    }
    
    #masthead.scrolled #primary-menu li a,
    #primary-menu.scrolled li.menu-item-has-children a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    #masthead.scrolled .menu-item-has-children::after {
        top: 8px;
    }
    #6033

    Phillip Allen
    Participant

    Perfect Thanks!

    #6652

    John
    Participant

    Hello – I would like to do the same, however, I don’t think suggested css code above is responsive. Do you have full version, for all devices/screen sizes? Thank you!

    #6655

    Andy
    Keymaster

    Hi John, to apply different rules for different screen sizes you would wrap the code like so:

    for screen widths up to 768px…

    @media screen and (max-width: 768px) {
        /* your CSS code/rules here */
    }

    …and for screen widths up to 1024px

    @media screen and (max-width: 1024px) {
        /* your CSS code/rules here */
    }

    so for example the following gives 20px top and bottom padding of the site-branding element on devices above 768px width and 5px padding on devices less than or equal to 768px width

    #masthead.scrolled #site-branding {
        padding: 20px 0;
    }
    
    @media screen and (max-width: 768px) {
        #masthead.scrolled #site-branding {
            padding: 5px 0;
        }
    }
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.