Shrinking header - again

How To
1

Hi, Yet again I seem to be stuck creating the header I want in Bricks. I’ve searched the forum and watched a number of videos, but none have really helped.

I’ve reduced my issue down to its simplest.

I have a stick header that is say 150px high.
I want this to shrink down to say 50px when the page is scrolled. With just the nav bar fixed at the top.

Easy no? Well it is in other builders but I just can’t get it to work in Bricks.

Is there a simple explanation on how to achieve this?

Large header …

Large header
Large header3626×578 44.6 KB

Shrunk header …

ShrunkHeader
ShrunkHeader3626×546 42.8 KB

At the moment I’m thinking of using BricksExtra as it appears to be able to do this easily, but obviously costly for just one site.

2

Hi @alanj,

If you inspect DOM of your site. You can find that header will get class “scrolling” which you can easily grab and style with CSS.

Let say you have your heading styled and you want to adjust top and bottom padding after page is scrolled.

You can do

.my-header-class .scrolling {
padding-top:1rem;
padding-bottom:1rem;
}
3

Thanks Martin.
However I don’t seem to have a Scrolling class. All I can see on my header is a class “Sticky”.
If I change the Header to enable Sticky on scroll then the header class changes to “Sticky on-scroll”

HeaderInspect
HeaderInspect1328×220 33.9 KB

Do I have to create a scrolling class myself? As you can tell I know very little about classes or CSS in general.

4

This is an example of what I’m ultimately aiming for … https://gpgb1.alanj.me.uk/

That is just a few clicks using GeneratePress/GenerateBlocks. No CSS needed by me.

But would be happy with just being able to achieve the shrinking and sticking header, and ignore the logo, using Bricks.

5

You need to enable sticky on scroll on your Header template. Then there should be class assigned after you scroll.

Here are some basic settings. Then you just need to apply css as I’ve described earlier.

6

Thanks again Martin,
Sadly I was still unable to get the CSS to work - probably as I don’t know what I’m doing.

But I have now found a solution. I’ve used BricksExtras which lets me build the header as I wanted with very little effort. Only needed some CSS to hide the logo when scrolled.

Cheers
Alan