Sticky-menu always visible

Hello support team,

I have a question about the Rocked Pro Theme
website: http://vbn-outlet.nl/

I want to choose the sticky-menu in this themes. But when I scroll… The sticky-menu disappears…

How can I set the sticky-menu always visible?

Thanks,

Tjeerd Engel

Hello there,

It should be working by without extra configuration if the sticky menu mode is enabled. Please visit Appearance > Customize > Header area > Menu style. Make sure that that sticky menu has been activated already.

Regards,
Kharis

Hello Kharis,

I activate the sticky menu. but when I scroll (blog items on the homepage and other blogitems) the (sticky) menu disappears… and later comes back?.. (this is also in the demo)

How can I set the sticky-menu always visible? (and not first disappears)?

Thanks,

Tjeerd

Please do the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

  $(window).scroll(function() {
    if ( $(this).scrollTop() > 52 ) {
      $('#header').addClass('do-sticky-header');
    } else {
      $('#header').removeClass('do-sticky-header');
    }
  });

})(jQuery);

  1. Update
  2. Add this extra CSS code to Appearance > Customize > Additional CSS:

@media only screen and (min-width:1025px) {
  
  #header.do-sticky-header {
    top: 0;
    opacity: 1 !important;
    position: fixed;
    z-index: 99;
  }   

}

Let me know how it goes.

Regards,
Kharis

It works! Thanks Kharis

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi Kharis,

Thanks for the solution. It worked for me as well. However I have a question. Is this a bug in rocked-pro and if so are you going to post an update?

Thanks in advance!
Ger

Hello Ger,

It isn’t a bug need to be corrected. It’s designed that way where the sticky header will be displaying after down-scroll event around 650px. If you want to make it immediately visible after a few down-scrolling, you should use the code I’ve suggested.

Regards,
Kharis

Thanks a lot for your fast response Kharis,

I was not aware of the 650 px event. However I implemented your suggested solution and that works very good,

Cheers,

Ger

You’re always welcome Ger!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Thanks again, Kharis!

Kind regards,

Ger