Header Bottom Appearance

[zedinho]

I want to create an app-like footer that is sticky and shows a navigation menu. Since I already have a “normal” footer which shows at the end of the content, I figured the best way to do this is to create a bottom bar in the PRO header builder. Everything works fine, but I’d like that bottom bar to be hidden initially and to show up when scrolling down a certain amount of pixels – just like the top bar header behaves. Unfortunately, such options are missing in the bottom bar builder.

By inspecting the top header bar I noticed that it initially has CSS declarations of position: absolute, visibility: hidden, and opacity: 0. When scrolling down, the position declaration changes to position: fixed and the element loses the other two declarations, which creates the appearance effect.

I guess there’s some jQuery code involved for this. How can I create the same effect for a bottom header bar using custom JS code in the header builder?

[ruenel]

Hello Patrick,

Thanks for writing in!

The bottom bar can only be displayed fixed and it is displayed by default and not hidden. You want it hidden? You will need custom css and custom JS script to accomplish that. Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself.

To get you start, please add a custom my-bottom-bar ID to your bottom bar as well. You can do that by finding the “Customize” tab in your bar settings. You can make use of this css then:

#my-bottom-bar {
  visibility: hidden;
  opacity: 0;
}

And the JS code that will be added could be like this:

(function($){
  $(window).on('scroll', function(){
    $('#my-bottom-bar').css({'opacity': 1, 'visibility': 'visible'});
  });
})(jQuery);

Please understand that this is beyond the scope of our support. The codes I am giving you is just an example to get you started of what you want to do.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Regards.

[zedinho]

Thank you.

Could you please add this as a feature request? I’ve seen more than a couple similar topics in this forum. I think the possibility to have the bottom bar of a header to be sticky and initially hidden would be appreciated options for the community.

Thanks.

[rad]

Hi Patrick,

I tried it too and yes, looks like not possible with the current options. I’ll add this as feature request.

Thanks!