Sticky-menu always visible


#1

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


#2

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


#3

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


#4

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


#5

It works! Thanks Kharis


#6

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


#7

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


#8

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


#9

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


#10

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


#11

Thanks again, Kharis!

Kind regards,

Ger