Fix header size

[RN0E]

Hello! I need some help with the header on this page: http://pagebc.ca/wordpress-site/banner-test-home/

I’m good with the size when the page first loads. But when you start scrolling down, it’s too big. The reason it is so big is because the container in bar 2 has a padding of 8px on the top. If I make the px smaller the menu is too close to the logo.

I would like it to be the same size as this menu when it scrolls: http://pagebc.ca/wordpress-site/conference-2019/

Any advice on how to fix this would be much appreciated! Thank you!

[christian]

Hey Rachel,

The problem with the setup is the Bars are absolutely positioned.

Here’s what to do:

1. Set both bars to Relative.
2. Set the background color of the first bar to the same as your second bar.
3. Reduce the padding of the container (containing the menu) in your second bar.

Don’t worry about the bar collapsing. It will not collapse if it’s positioned relative.

Hope that helps.

[RN0E]

That fixed it!! Thank you so much!

When I scroll down the page, it looks like it jumps a little bit to the next section from image to white text space). Is there a way for it to scroll more smoothly? http://pagebc.ca/wordpress-site/banner-test-home/

[friech]

Hi Rachel,

To resolve that, please duplicate your second bar (where the menu is), set the duplicate bar to be Sticky Bar and Initially Hidden.

Unset the original bar from being Sticky Bar. That should create a smooth transition between the static bars and fixed bar.

Hope it helps,
Cheers!

[RN0E]

It sure did, thank you so much!

[friech]

You’re more than welcome, glad we could help.

Cheers!