Dynamic Header Resizing

Ask the community
,
1

I am thrilled to use Wix Code to help downsize my header as you scroll down the page and expand it once you scroll back up. It helps reduce a 170px header down to 40px, allowing a much better viewing experience on smaller desktop screens. However, at present, if an element is displaying in the 130px beneath that reduced header, the transparent header#SITE_HEADER container is displaying over the content, making it impossible to click a link or button. Is there any way to resize the header dynamically?

2

The site is www.endersisland.com

1920×1069 406 KB

3

Hi,

You can review the correspondence regarding creating a sticky menu here . You can also check out this video tutorial .

Best,
Tal.

4

Tal, thanks but unfortunately, the tutorial doesn’t cover this variable. In my case, the difference in the header size reduction is much bigger as you can see in the image I posted. Still looking for some insight about resizing/collapsing the actual header, not just strips within the header.

5

I got mine to work but its not smooth at all and the sizes of the banner is bigger. How can I make it smooth and not take too long to load?

6

Hello folks,
By coincidence, I happen to be wanting to control the same things - menus etc. There is a VERY interesting page that you should look at here:-
https://javascript.info/js-animation

It is really informative, and actually fascinating, both in terms of code, and from the graphs drawn to illustrate visually how an effect or animation works.

Shall we all try to get some of this incorporated? I’m going to go for a shrinking header that has a slight, smooth bounce to it!

7

This will be possible as soon as Wix incorporates a style property into boxes and column strips…fingers crossed

8

I am facing similar problem. I would like to resize my header after my search bar collpases and expands.

My site: www.chicdog.cl

Any ideas?

9

Your collapsing and expanding animations are excellent! Could you share how you accomplished this?

As for resizing the header, I accomplished this on my site by creating two different elements in the header. I don’t believe the header size can be specified via Corvid (open to corrections!)

BUT… I did notice that the problem plaguing the original post is no longer an issue.

10

I think it’s not been implemented? There’s a feature request here: