Make Bottom Header - Hide Initially

[PhrasingInc]

I’m looking to create a sticky bottom bar header but would like it to appear after scrolling past the opening header. Is it possible to utilize a “hide initially” function like we can with sticky top headers?

[ruenel]

Hello Tim,

Thanks for writing in!

Simply insert another bar next to your current sticky bar. Set it as a second sticky bar while enabling the “Hide Initially” option in the bar settings so that it will not be displaying as soon as the page is loaded. It will only be displayed once you scroll the page.

We would love to know if this has worked for you. Thank you.

[PhrasingInc]

That allows me to create a second sticky bar but, my hope is that I could stick it to the bottom of the screen. Is this possible?

[marc_a]

Hi Tim,

Thank you for your feedback. To attain your desire layout, we need to add some custom css.

1.) You need to follow this format in your bar settings:

2.) Click the customize option

3.) Add a css class here, I call mine “custom-bar”

4.) Click on Edit CSS

5.) Then add this css code:

.custom-bar {
bottom: 0;
top: inherit !important;
}

Note: that the “custom-bar” is the css class name you define in instruction # 3.

Just a friendly reminder that if you choose to use the Pro Bottom Header area in the future, it will conflict with the custom CSS I provide to you.

“Please note that providing custom code is outside the scope of our theme support. Issues that will arise from the use of custom codes should be forwarded to a 3rd party developer”

Thank you.

[PhrasingInc]

Thank you! That was exactly what I was trying to do. I completely understand that the custom CSS could conflict.

[friech]

Glad we could help,

Cheers!