[PenguinParticipant]

Hi,

My 1st post, so let me start with saying: you rock. Awesome product.

Now I want to make a sort of Welcome Mat (Sumome) kind of intro for my clients website. My X-Topbar shows a fullscreen picture using background and I adjusted so that the menu is on the bottom. I added a circle, when you click it it scrolls down to the homepage blog.

1. How to adjust scrolling so that menu and space before content is still visible?

2. Can I use CSS and javascript to hide the complete topbar once a user scrolled down?

3. Can I use CSS and javascript to make sure this Topbar is only visible on the homepage blog overview, not on other pages like pages and articles?

I have searched over 20 articles on this forum about topbar and scrolling and I got this far, but I did not find the answer. I think this cool effect will benefit the community greatly. People are desperate for welcome mats! 🙂

Hope you can give me a hint, tip or snippet. Thanks in advance, keep rockin’!

PS I will share details in post below.

[PenguinParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Thanks for writing in and for the kind words. Before we proceed I advice that we utilize the Feature Slider Above Masthead instead of customizing the topbar. This should immediately address the #1 and #3 issue, please clarify the #2 issue.

You can install Revolution Slider under Addons > Extensions.

Cheers!

[PenguinParticipant]

Hi,

Thanks for the quick reply. I will try to utilize the Slider for #1 and #3.

As for #2. Can I make the topbar disappear / be disabled once the user has clicked the button? When the user clicked the button, the Slider is no longer relevant and should not show when scrolling back up.

Thanks in advance.

[ZeshanMember]

Hi there,

Thanks for writing back!

#2: This isn’t possible out of the box and would require custom development to achieve. While that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

So, try replacing your following jQuery code under Customizer:

jQuery(document).ready(function($) {
  $('.splash-arrow').click(function(e) {
    e.preventDefault();
    var $contentBand = $(this).attr('href');
    $('html, body').animate({
      scrollTop: $("#text-7").offset().top
    }, 850, 'easeInOutExpo');
  });
}); 

With this:

jQuery(document).ready(function($) {
  $('.splash-arrow').click(function(e) {
    e.preventDefault();
    var $contentBand = $(this).attr('href');
    $('.x-topbar').slideUp( 450 );
  });
});

So when the user will click on the topbar arrow, it will slide out (hide with slide up animation) the topbar.

Thank you!

[Author]

Posts