Header Enlarge, Shrink

[Phillip Allen]

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

[Andy]

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;
}

[Phillip Allen]

Perfect Thanks!

[AMTSO]

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!

[Andy]

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;
    }
}

[Author]

Posts