Custom CSS to shrink the sticky header height and logo when scrolling

If the header is sticky and is too tall, or if you simply want to shrink the header height and the logo size when you scroll down, you probably enabled the “shrink” option in the header themer layout. Typically this is fine, however, sometimes you may experience an issue on firefox where the logo disappears because it doesn’t have default a height set. You may also experience an issue where extra padding becomes visible below the header after it has shrunk.

This is a bug that should have been fixed, but if you still see it and your plugins are updated, you can choose to use the following CSS snippets in order to create a shrink effect without using the settings in the header themer layout.

First, make sure sticky header is enabled. Then make sure you disable shrink. The sticky setting adds a sticky and scrolled class to the header that you will make use of. In the header themer layout, give the header row this class “headerrow.” Change the row height to “min-height” and set it to a certain number in pixels. For the logo make sure you are using the standard photo module, not the PowerPack one. Save and publish your header.

Place the following CSS in the customizer in the media query for large screens and modify it as needed.

/*-----custom sticky header shrink css-----*/

/*-----this sets the default height of the header before you scroll-----*/
.headerrow .fl-row-content-wrap {
    height: auto;
    max-height: 100px; /*change this to the number you set as the min-height of the header in the builder*/
    transition: 0.3s;
}
/*-----this sets the default height of the logo before you scroll-----*/
.headerrow .fl-row-content-wrap .fl-module-photo img.fl-photo-img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 80px; /*-----change this to the height that the logo looks best at-----*/
    transition: 0.3s;
}

/*-----only use this snippet if the header is to be transparent before scrolling, otherwise omit this-----*/
header.fl-theme-builder-header-sticky .headerrow .fl-row-content-wrap {
    background-color: transparent;
}

/*-----this shrinks the height of the header when you scroll - modify or remove the background color, box shadow, border based on whether these items change on scroll-----*/
header.fl-theme-builder-header-sticky.fl-theme-builder-header-scrolled .headerrow .fl-row-content-wrap {
    background-color: #fffffff5; 
    box-shadow: 0 2px 6px #00000021;
    border-bottom: 1px solid #000000;
    min-height: 85px; /*-----change this to the height the header should be at on scroll-----*/
    max-height: 85px; /*-----change this to the same number you choose for min height-----*/
    transition: 0.3s;
}

/*-----this shrinks the height of the logo after you scroll-----*/
header.fl-theme-builder-header-sticky.fl-theme-builder-header-scrolled .headerrow .fl-row-content-wrap .fl-module-photo img.fl-photo-img {
    max-height: 65px; /*-----change this to the height the logo should be at on scroll-----*/
    transition: 0.3s;
}