Shrinking header

How To
1

Hi fellas, how can I create shrinking header on scroll? Also I want to make shrinking logo as well.

Anybody offers me extra addon or tutorial video or custom code?

2

I use the following CSS code in the header section:

header .bricks-site-logo {
  height: 80px;
  transition: all 0.6s;
}

header.scrolling .bricks-site-logo {
  height: 50px;
}
3

Thanks for reply my friend, I will test code and reply you.:+1:t2:

4

Hi my friend, your code is working on site logo but I want to make shrink also sticky header background, can you help also this sitution?

5

Honestly, I have no idea. I have done nothing else.

Is this the effect you are looking for?

https://www.autotissue.de

6

Yes, exactly this on link what I want to do.

7

Is it possible that the minimum height of your header is determined by something else? In my case it is the icon. That’s the reason why the rest shrinks with the icon.

8

Which custom codes did you use for making this sticky shrinking header? Cause, what I want exactly this one.

9

Hi my friend, I figure out via these custom codes;

Header Background Shrink CSS

#brx-header.sticky.scrolling:not(.slide-up) > .brxe-section, #brx-header.sticky.scrolling:not(.slide-up) > .brxe-container, #brx-header.sticky.scrolling:not(.slide-up) > .brxe-block, #brx-header.sticky.scrolling:not(.slide-up) > .brxe-div {
box-shadow: 0 0 50px 0 #424242;
min-height: 80px;
}

#brx-header.sticky.scrolling > .brxe-section, #brx-header.sticky.scrolling > .brxe-container, #brx-header.sticky.scrolling > .brxe-block, #brx-header.sticky.scrolling > .brxe-div {
background-color: #424242;
}

#brx-header.sticky .bricks-nav-menu>li>a, #brx-header.sticky>.brxe-block, #brx-header.sticky>.brxe-container, #brx-header.sticky>.brxe-div, #brx-header.sticky>.brxe-section {
transition: inherit;
}

Logo Shrink CSS

header .bricks-site-logo {
height: 50px;
transition: all 0.6s;
}

header.scrolling .bricks-site-logo {
height: 30px;
}

3 Likes
10

This doesn’t work for me. It only does a black background for the scrolling header. Nothing else happens on my side. Is something else to do? Header settings?

11

Hi Michael, before you need to set header as sticky in your template settings.